/* ===================================================================== e-wola — GLOBAL STYLES (main.css) --------------------------------------------------------------------- Shared design system for every page: tokens, reset, layout, typography, buttons, badges, cards and the fade-up animation. Load this FIRST in each page's , then the page's own Both naming conventions used on the site are supported here (e.g. .section & .s, .btn-primary & .btn-dark, .fade-up.visible & .in). ===================================================================== */ /* ---------- DESIGN TOKENS ---------- */ :root { --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-section: #8B7CF6; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-dark: rgba(123,107,230,0.25); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --transition: 0.25s cubic-bezier(0.4,0,0.2,1); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* ---------- RESET & BASE ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); background: var(--white); color: var(--text-dark); overflow-x: hidden; line-height: 1.6; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; height: auto; } button { font-family: var(--font-body); } ul, ol { list-style: none; } /* ---------- LAYOUT ---------- */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; } .section { padding: 88px 0; } .section-sm { padding: 64px 0; } .s { padding: 88px 0; } .s-sm { padding: 64px 0; } .s-lg { padding: 112px 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } /* ---------- TYPOGRAPHY ---------- */ .display-xl { font-family: var(--font-head); font-size: clamp(40px, 6.5vw, 84px); line-height: 1.05; color: var(--text-dark); } .display-lg { font-family: var(--font-head); font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; color: var(--text-dark); } .display-md { font-family: var(--font-head); font-size: clamp(22px, 3vw, 36px); line-height: 1.2; color: var(--text-dark); } .body-lg { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; } .body-md { font-size: 16px; line-height: 1.65; } .body-sm { font-size: 14px; line-height: 1.6; } .text-purple { color: var(--purple); } .text-lime { color: var(--lime-dark); } .text-muted { color: var(--text-muted); } .text-white { color: #fff; } .text-center { text-align: center; } .h1 { font-family: var(--font-head); font-size: clamp(34px,5.5vw,68px); line-height: 1.05; letter-spacing: -0.5px; } .h2 { font-family: var(--font-head); font-size: clamp(28px,3.8vw,48px); line-height: 1.1; } .h3 { font-family: var(--font-head); font-size: clamp(22px,3vw,36px); line-height: 1.2; } .h4 { font-family: var(--font-head); font-size: clamp(18px,2vw,24px); line-height: 1.3; } .lead { font-size: clamp(16px,1.8vw,20px); line-height: 1.65; color: var(--text-body); } .body { font-size: 16px; line-height: 1.65; color: var(--text-body); } .small { font-size: 14px; line-height: 1.6; } .xs { font-size: 12px; line-height: 1.5; } .c-purple { color: var(--purple); } .c-lime { color: var(--lime-dark); } .c-muted { color: var(--text-muted); } .c-white { color: #fff; } .ta-c { text-align: center; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 15px; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; text-decoration: none; letter-spacing: -0.01em; } .btn-primary { background: var(--text-dark); color: #fff; padding: 16px 32px; } .btn-primary:hover { background: #1a1730; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,13,26,0.2); } .btn-dark { background: var(--text-dark); color: #fff; padding: 16px 32px; } .btn-dark:hover { background: #1a1730; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,13,26,0.2); } .btn-outline { background: transparent; color: var(--text-dark); padding: 15px 31px; border: 2px solid var(--text-dark); } .btn-outline:hover { background: var(--text-dark); color: #fff; transform: translateY(-2px); } .btn-outline-white { background: transparent; color: #fff; padding: 15px 31px; border: 2px solid rgba(255,255,255,0.5); } .btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-2px); } .btn-lime { background: var(--lime); color: var(--text-dark); padding: 16px 32px; } .btn-lime:hover { background: var(--lime-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(180,240,0,0.3); } .btn-white { background: #fff; color: var(--text-dark); padding: 16px 32px; } .btn-white:hover { background: var(--off-white); transform: translateY(-2px); } .btn-whatsapp { background: #25D366; color: #fff; padding: 16px 28px; } .btn-whatsapp:hover { background: #1fba57; transform: translateY(-2px); } .btn-wa { background: #25D366; color: #fff; padding: 16px 28px; } .btn-wa:hover { background: #1fba57; transform: translateY(-2px); } .btn-lg { padding: 18px 38px; font-size: 16px; } .btn-sm { padding: 10px 22px; font-size: 13px; } .btn-xs { padding: 7px 16px; font-size: 12px; } /* ---------- BADGE ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(123,107,230,0.1); border: 1.5px solid rgba(123,107,230,0.2); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); } .badge-dark { background: var(--text-dark); color: #fff; border-color: transparent; } .badge-lime { background: var(--lime); color: var(--text-dark); border-color: transparent; } .badge-white { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.25); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} } /* ---------- CARD ---------- */ .card { background: var(--bg-card2); border-radius: var(--radius-xl); border: 1px solid var(--border); transition: var(--t); } .card:hover { background: var(--bg-card); transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-white { background: #fff; border-radius: var(--radius-xl); border: 1.5px solid var(--border); transition: var(--t); } .card-white:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--shadow-sm); } .icon-box { width: 52px; height: 52px; border-radius: 16px; background: var(--bg-lavender); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: var(--t); } /* ---------- SCROLL-IN ANIMATION ---------- */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.in { opacity: 1; transform: translateY(0); } /* ==================================================================== PAGE: index.html (scoped under html.pg-index) ==================================================================== */ /* ============================================= DESIGN TOKENS — SOCIELL-INSPIRED LIGHT THEME ============================================= */ html.pg-index{ /* Colors */ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-section: #8B7CF6; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-dark: rgba(123,107,230,0.25); /* Typography */ --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* Spacing */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; /* Shadows */ --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --transition: 0.25s cubic-bezier(0.4,0,0.2,1); } html.pg-index{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } html.pg-index img{ max-width: 100%; display: block; } /* ============================================= NAVIGATION ============================================= */ html.pg-index .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; transition: var(--transition); background: transparent; } html.pg-index .nav.scrolled{ background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(123,107,230,0.1); } html.pg-index .nav:has(~ .mobile-nav.open){ background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(123,107,230,0.1); } html.pg-index .nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px; } html.pg-index .nav-logo{ font-family: var(--font-head); font-size: 22px; color: var(--text-dark); display: flex; align-items: center; gap: 4px; } html.pg-index .nav-logo-accent{ color: var(--purple); } html.pg-index .nav-links{ display: flex; align-items: center; gap: 2px; list-style: none; } html.pg-index .nav-links a{ font-size: 14px; font-weight: 600; color: var(--text-body); padding: 8px 14px; border-radius: var(--radius-pill); transition: var(--transition); } html.pg-index .nav-links a:hover, html.pg-index .nav-links a.active{ color: var(--purple); background: rgba(123,107,230,0.07); } html.pg-index .nav:not(.scrolled) .nav-links a:hover, html.pg-index .nav:not(.scrolled) .nav-links a.active{ color: var(--lime); background: rgba(255,255,255,0.14); } html.pg-index .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-index .nav:not(.scrolled) .nav-dropdown-menu a.active{ color: var(--purple); background: rgba(123,107,230,0.07); } html.pg-index .nav-dropdown{ position: relative; } html.pg-index .nav-dropdown::after{ content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } html.pg-index .nav-dropdown-menu{ position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 8px; min-width: 230px; opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: var(--shadow-md); } html.pg-index .nav-dropdown:hover .nav-dropdown-menu{ opacity: 1; visibility: visible; } html.pg-index .nav-dropdown-menu a{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; border-radius: 10px; color: var(--text-body); font-weight: 500; } html.pg-index .nav-dropdown-menu a .dm-icon{ font-size: 16px; flex-shrink: 0; } html.pg-index .nav-dropdown-menu a:hover, html.pg-index .nav-dropdown-menu a.active{ background: rgba(123,107,230,0.07); color: var(--purple); } html.pg-index .nav-cta{ display: flex; align-items: center; gap: 10px; } html.pg-index .nav-menu-btn{ display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-dark); font-size: 22px; } /* Mobile nav */ html.pg-index .mobile-nav{ display: none; position: fixed; inset: 0; z-index: 99; background: #fff; padding: 90px 28px 40px; flex-direction: column; gap: 4px; overflow-y: auto; } html.pg-index .mobile-nav.open{ display: flex; } html.pg-index .mobile-nav > a{ font-family: var(--font-head); font-size: 22px; color: var(--text-dark); padding: 14px 0; border-bottom: 1px solid var(--border); display: block; transition: var(--transition); } html.pg-index .mobile-nav > a:hover, html.pg-index .mobile-nav > a.active{ color: var(--purple); font-weight: 700; } html.pg-index .mobile-nav-cta{ margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } /* ============================================= HERO — Purple section like Sociell ============================================= */ /* hero card top row — badges left, character right */ html.pg-index .hero-card-top-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; } html.pg-index .hero-card-illus{ flex-shrink: 0; display: flex; align-items: flex-end; justify-content: flex-end; margin-top: -40px; margin-right: -20px; } html.pg-index .hero-card-character{ width: clamp(140px, 18vw, 240px); height: auto; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.15)); animation: card-char-float-pg-index 4s ease-in-out infinite; } @keyframes card-char-float-pg-index { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } } @media (max-width: 640px) { html.pg-index .hero-card-illus{ margin-top: -24px; margin-right: -12px; } html.pg-index .hero-card-character{ width: clamp(100px, 28vw, 150px); } } html.pg-index .hero-headline-wrap{ position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; } html.pg-index .hero-character{ width: clamp(100px, 12vw, 180px); height: auto; flex-shrink: 0; margin-bottom: -8px; transform: scaleX(-1); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2)); animation: character-float-pg-index 4s ease-in-out infinite; position: relative; z-index: 2; margin-right: -16px; } @keyframes character-float-pg-index { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-10px); } } html.pg-index .hero-headline-text{ position: relative; z-index: 1; text-align: center; } html.pg-index .hero{ background: var(--purple-hero); min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 90px; position: relative; overflow: hidden; } /* Subtle dot grid */ html.pg-index .hero::before{ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px); background-size: 36px 36px; pointer-events: none; } html.pg-index .hero-top{ padding: 60px 0 0; position: relative; z-index: 1; } html.pg-index .hero-badge-wrap{ text-align: center; margin-bottom: 28px; } html.pg-index .hero-badge-welcome{ background: var(--text-dark); color: #fff; padding: 8px 20px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; } html.pg-index .hero-title{ font-family: var(--font-head); font-size: clamp(48px, 5.5vw, 72px); line-height: 1; color: var(--lime); text-align: center; letter-spacing: -1px; margin-bottom: 0; } html.pg-index .hero-subtitle-main{ font-family: var(--font-head); font-size: clamp(28px, 3.5vw, 48px); line-height: 1.05; color: rgba(255,255,255,0.85); text-align: center; letter-spacing: -0.5px; margin-top: 8px; margin-bottom: 0; } /* hero cards row */ html.pg-index .hero-bottom{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 40px 0 0; position: relative; z-index: 1; } html.pg-index .hero-card-left{ background: var(--lime); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 36px 36px 40px; display: flex; flex-direction: column; gap: 20px; } html.pg-index .hero-card-badges{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } html.pg-index .hero-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; cursor: default; } html.pg-index .hero-pill-dark{ background: var(--text-dark); color: #fff; } html.pg-index .hero-pill-outline{ background: transparent; color: var(--text-dark); border: 2px solid var(--text-dark); } html.pg-index .hero-card-desc{ font-size: 14px; color: var(--text-dark); line-height: 1.65; max-width: 320px; } html.pg-index .hero-card-actions{ display: flex; gap: 12px; flex-wrap: wrap; } /* Illustration placeholder in card */ html.pg-index .hero-illus-slot{ display: flex; align-items: flex-end; justify-content: center; flex: 1; min-height: 180px; border: 2px dashed rgba(15,13,26,0.2); border-radius: var(--radius-lg); padding: 20px; text-align: center; background: rgba(255,255,255,0.25); } html.pg-index .hero-illus-slot-text{ font-size: 12px; color: rgba(15,13,26,0.6); font-weight: 600; line-height: 1.5; } html.pg-index .hero-illus-slot-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-dark); margin-bottom: 6px; } html.pg-index .hero-card-right{ background: rgba(255,255,255,0.15); border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 380px; position: relative; } html.pg-index .hero-card-right-inner{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; } html.pg-index .hero-right-placeholder{ text-align: center; border: 2px dashed rgba(255,255,255,0.3); border-radius: var(--radius-lg); padding: 40px 32px; width: 100%; } html.pg-index .hero-right-placeholder .slot-icon{ font-size: 52px; opacity: 0.5; margin-bottom: 12px; } html.pg-index .hero-right-placeholder .slot-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 8px; } html.pg-index .hero-right-placeholder .slot-desc{ font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; } /* Pricing tag */ html.pg-index .hero-pricing-tag{ position: absolute; top: 24px; right: 24px; background: var(--text-dark); color: #fff; border-radius: var(--radius-pill); padding: 8px 18px; font-size: 13px; font-weight: 700; } html.pg-index .hero-pricing-tag span{ color: var(--lime); } /* ============================================= CLIENTS / TRUST LOGOS STRIP ============================================= */ /* ============================================= CLIENTS MARQUEE STRIP ============================================= */ html.pg-index .clients-strip{ background: var(--white); padding: 32px 0; border-bottom: 1px solid var(--border); overflow: hidden; } html.pg-index .clients-label{ text-align: center; font-size: 12px; font-weight: 700; color: var(--text-light); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px; } html.pg-index .clients-marquee-pg-index-wrap{ overflow: hidden; width: 100%; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); } html.pg-index .clients-marquee-pg-index-track{ display: flex; align-items: center; gap: 0; animation: clients-scroll-pg-index 22s linear infinite; white-space: nowrap; width: max-content; } html.pg-index .clients-marquee-pg-index-track:hover{ animation-play-state: paused; } html.pg-index .client-logo-item{ font-family: var(--font-head); font-size: 18px; color: var(--text-light); padding: 0 28px; opacity: 0.55; transition: opacity 0.2s; flex-shrink: 0; } html.pg-index .client-logo-item:hover{ opacity: 1; color: var(--purple); } html.pg-index .client-logo-sep{ color: var(--purple); font-size: 12px; opacity: 0.3; flex-shrink: 0; } @keyframes clients-scroll-pg-index { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Stats row */ html.pg-index .stats-row{ display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; padding: 40px 0; } html.pg-index .stat-item{ text-align: center; padding: 20px 48px; border-right: 1px solid var(--border); } html.pg-index .stat-item:last-child{ border-right: none; } html.pg-index .stat-num{ font-family: var(--font-head); font-size: clamp(36px, 5vw, 58px); color: var(--text-dark); line-height: 1; margin-bottom: 6px; } html.pg-index .stat-label{ font-size: 13px; color: var(--text-muted); font-weight: 500; } /* ============================================= SERVICES — White section ============================================= */ html.pg-index .services-section{ background: var(--white); padding: 88px 0; } html.pg-index .services-header{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: flex-end; margin-bottom: 60px; } html.pg-index .services-header-right{ font-size: 15px; color: var(--text-muted); line-height: 1.7; text-align: right; } html.pg-index .services-header-right em{ color: var(--purple); font-style: normal; font-weight: 700; } html.pg-index .services-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } html.pg-index .service-card{ background: var(--bg-card2); border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; gap: 16px; transition: var(--transition); position: relative; overflow: hidden; cursor: pointer; } html.pg-index .service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); background: var(--bg-card); } html.pg-index .service-num{ font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--purple); text-transform: uppercase; margin-bottom: 4px; } html.pg-index .service-name{ font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 26px); color: var(--purple); margin-bottom: 6px; } html.pg-index .service-desc{ font-size: 14px; color: var(--text-muted); line-height: 1.65; flex: 1; } html.pg-index .service-highlights{ display: flex; flex-direction: column; gap: 6px; } html.pg-index .service-highlight{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); font-weight: 500; padding: 4px 0; border-bottom: 1px solid rgba(123,107,230,0.1); transition: var(--transition); cursor: pointer; } html.pg-index .service-highlight:last-child{ border-bottom: none; } html.pg-index .service-highlight:hover{ color: var(--purple); gap: 14px; } html.pg-index .service-highlight-arrow{ color: var(--purple); font-size: 14px; } /* Service illustration slot */ html.pg-index .service-illus{ display: flex; align-items: center; justify-content: center; height: 250px; border: 2px dashed rgba(123,107,230,0.2); border-radius: var(--radius-md); background: rgba(123,107,230,0.04); text-align: center; padding: 20px; margin-top: 8px; } html.pg-index .service-illus-text{ font-size: 11px; color: var(--purple); font-weight: 700; line-height: 1.5; opacity: 0.7; } html.pg-index .service-illus.has-image { border: none; background: transparent; padding: 0; } html.pg-index .service-illus.has-image img { max-height: 100%; max-width: 100%; object-fit: contain; } /* ============================================= WHY SECTION — Lime green background ============================================= */ html.pg-index .why-section{ background: var(--lime-section); padding: 88px 0; } html.pg-index .why-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } html.pg-index .why-illus-side{ display: flex; align-items: center; justify-content: center; } html.pg-index .why-illus-box{ width: 100%; max-width: 380px; aspect-ratio: 1; border: 3px dashed rgba(15,13,26,0.15); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,0.3); padding: 32px; text-align: center; } html.pg-index .why-illus-icon{ font-size: 64px; opacity: 0.5; } html.pg-index .why-illus-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-dark); opacity: 0.8; } html.pg-index .why-illus-desc{ font-size: 12px; color: rgba(15,13,26,0.6); line-height: 1.6; } html.pg-index .why-illus-box.has-image { border: none; background: transparent; padding: 0; max-width: 510px; height: 510px; } html.pg-index .why-illus-box.has-image img { width: auto; height: 510px; max-width: 100%; object-fit: contain; } html.pg-index .why-content{ } html.pg-index .why-stats{ display: flex; flex-direction: column; gap: 0; margin-top: 40px; } html.pg-index .why-stat{ padding: 28px 0; border-top: 2px solid rgba(15,13,26,0.15); } html.pg-index .why-stat:last-child{ border-bottom: 2px solid rgba(15,13,26,0.15); } html.pg-index .why-stat-num{ font-family: var(--font-head); font-size: clamp(52px, 7vw, 80px); color: var(--text-dark); line-height: 1; margin-bottom: 8px; } html.pg-index .why-stat-desc{ font-size: 14px; color: var(--text-body); max-width: 320px; line-height: 1.6; } html.pg-index .why-stat-desc em{ color: var(--purple-dark); font-style: normal; font-weight: 700; } html.pg-index .why-cta{ margin-top: 32px; } /* ============================================= FEATURES GRID — White/Lavender section ============================================= */ html.pg-index .features-section{ background: var(--white); padding: 88px 0; } html.pg-index .features-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; } html.pg-index .feature-card{ background: var(--bg-lavender); border-radius: var(--radius-lg); padding: 28px; transition: var(--transition); } html.pg-index .feature-card:hover{ background: var(--bg-card); transform: translateY(-4px); box-shadow: var(--shadow-sm); } html.pg-index .feature-card.featured{ background: var(--bg-card); } html.pg-index .feature-icon{ font-size: 32px; margin-bottom: 14px; display: flex; align-items: center; height: 48px; } html.pg-index .feature-icon img.feature-icon-img{ height: 44px; width: auto; object-fit: contain; } html.pg-index .feature-name{ font-family: var(--font-head); font-size: 17px; color: var(--text-dark); margin-bottom: 8px; } html.pg-index .feature-desc{ font-size: 13px; color: var(--text-muted); line-height: 1.6; } /* ============================================= PORTFOLIO — Lime section ============================================= */ html.pg-index .portfolio-section{ background: var(--lime-section); padding: 88px 0; } html.pg-index .portfolio-header{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 20px; flex-wrap: wrap; } html.pg-index .portfolio-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; align-items: stretch; } html.pg-index .portfolio-card{ background: var(--text-dark); border-radius: var(--radius-xl); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; } html.pg-index .portfolio-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); } html.pg-index .portfolio-img{ height: 240px; display: flex; align-items: center; justify-content: center; background: rgba(123,107,230,0.2); position: relative; } html.pg-index .portfolio-img-placeholder{ text-align: center; padding: 24px; } html.pg-index .portfolio-img-placeholder .pi-icon{ font-size: 40px; opacity: 0.4; margin-bottom: 10px; } html.pg-index .portfolio-img-placeholder .pi-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); opacity: 0.8; margin-bottom: 6px; } html.pg-index .portfolio-img-placeholder .pi-desc{ font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.4; } html.pg-index .portfolio-info{ padding: 24px 28px 28px; flex:1; } html.pg-index .portfolio-tag{ font-size: 11px; font-weight: 700; color: var(--lime); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } html.pg-index .portfolio-title{ font-family: var(--font-head); font-size: 22px; color: #fff; margin-bottom: 6px; } html.pg-index .portfolio-sub{ font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 16px; } html.pg-index .portfolio-metrics{ display: flex; gap: 24px; flex-wrap: wrap; } html.pg-index .portfolio-metric{ } html.pg-index .metric-num{ font-family: var(--font-head); font-size: 20px; color: var(--lime); } html.pg-index .metric-label{ font-size: 11px; color: rgba(255,255,255,0.5); } html.pg-index .portfolio-card-link{ display: block; background: var(--text-dark); color: #fff; text-align: center; padding: 16px; font-weight: 700; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.08); transition: var(--transition); } html.pg-index .portfolio-card-link:hover{ background: var(--purple-dark); } html.pg-index .portfolio-cta{ text-align: center; } /* ============================================= INDUSTRIES — White section ============================================= */ html.pg-index .industries-section{ background: var(--white); padding: 88px 0; } html.pg-index .industries-header{ text-align: center; margin-bottom: 56px; } html.pg-index .industries-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } html.pg-index .industry-card{ background: var(--bg-lavender); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; transition: var(--transition); cursor: pointer; border: 2px solid transparent; } html.pg-index .industry-card:hover{ background: var(--bg-card); border-color: var(--purple); transform: translateY(-4px); box-shadow: var(--shadow-sm); } html.pg-index .industry-icon{ font-size: 40px; margin-bottom: 14px; display:flex; align-items:center; justify-content:center; } html.pg-index .industry-name{ font-family: var(--font-head); font-size: 15px; color: var(--text-dark); margin-bottom: 6px; } html.pg-index .industry-sub{ font-size: 12px; color: var(--text-muted); } /* ============================================= REGIONS — Purple section ============================================= */ html.pg-index .regions-section{ background: var(--purple); padding: 88px 0; } html.pg-index .regions-header{ text-align: center; margin-bottom: 56px; } html.pg-index .regions-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } html.pg-index .region-card{ background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: 18px; display: flex; align-items: center; gap: 12px; transition: var(--transition); cursor: pointer; } html.pg-index .region-card:hover{ background: rgba(255,255,255,0.18); border-color: var(--lime); transform: translateX(4px); } html.pg-index .region-icon{ width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } html.pg-index .region-name{ font-family: var(--font-head); font-size: 15px; color: #fff; margin-bottom: 2px; } html.pg-index .region-sub{ font-size: 11px; color: rgba(255,255,255,0.6); } html.pg-index .region-arrow{ margin-left: auto; color: rgba(255,255,255,0.5); transition: var(--transition); font-size: 14px; } html.pg-index .region-card:hover .region-arrow{ color: var(--lime); } /* ============================================= PROCESS — Lime section ============================================= */ html.pg-index .process-section{ background: var(--lime-section); padding: 88px 0; } html.pg-index .process-header{ text-align: center; margin-bottom: 64px; } html.pg-index .process-steps{ display: flex; flex-direction: column; gap: 0; } html.pg-index .process-step-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 64px 0; border-top: 2px solid rgba(15,13,26,0.1); } html.pg-index .process-step-row:last-child{ border-bottom: 2px solid rgba(15,13,26,0.1); } html.pg-index .process-step-row.reverse{ direction: rtl; } html.pg-index .process-step-row.reverse > *{ direction: ltr; } html.pg-index .process-step-content{ } html.pg-index .step-badge{ font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-dark); margin-bottom: 12px; } html.pg-index .step-title{ font-family: var(--font-head); font-size: clamp(24px, 3vw, 36px); color: var(--text-dark); margin-bottom: 16px; } html.pg-index .step-desc{ font-size: 15px; color: var(--text-body); line-height: 1.7; margin-bottom: 20px; max-width: 400px; } html.pg-index .step-list{ list-style: none; display: flex; flex-direction: column; gap: 8px; } html.pg-index .step-list li{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-body); font-weight: 500; } html.pg-index .step-list li::before{ content: '●'; color: var(--purple); font-size: 10px; flex-shrink: 0; } html.pg-index .process-step-illus{ display: flex; align-items: center; justify-content: center; height: 300px; border: 3px dashed rgba(15,13,26,0.12); border-radius: var(--radius-xl); background: rgba(255,255,255,0.3); padding: 32px; text-align: center; } html.pg-index .process-illus-content{ } html.pg-index .process-illus-icon{ font-size: 56px; opacity: 0.4; margin-bottom: 12px; } html.pg-index .process-illus-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-dark); opacity: 0.7; margin-bottom: 8px; } html.pg-index .process-illus-desc{ font-size: 12px; color: rgba(15,13,26,0.55); line-height: 1.5; } html.pg-index .process-step-illus.has-image { padding: 12px; border: none; background: transparent; } html.pg-index .process-step-illus.has-image img { height: 300px; max-width: 100%; object-fit: contain; } /* ============================================= TESTIMONIALS — White section ============================================= */ html.pg-index .testimonials-section{ background: var(--white); padding: 88px 0; } html.pg-index .testimonials-header{ margin-bottom:56px; } html.pg-index .testimonials-header-body{ display:flex; align-items:center; justify-content:space-between; gap:40px; } html.pg-index .testimonials-header-left{ text-align:left; } html.pg-index .testimonials-header-right{ flex-shrink:0; } html.pg-index .google-review-link{ display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; } html.pg-index .google-review-link:hover{ opacity:0.85; } html.pg-index .google-review-img{ width:160px; height:auto; display:block; } html.pg-index .google-review-cta{ font-size:15px; font-weight:700; color:var(--text-dark); white-space:nowrap; } html.pg-index .google-review-highlight{ color:var(--purple); } html.pg-index .testimonials-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } html.pg-index .testimonial-card{ background: var(--bg-lavender); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 16px; transition: var(--transition); } html.pg-index .testimonial-card:hover{ background: var(--bg-card); transform: translateY(-4px); box-shadow: var(--shadow-sm); } html.pg-index .stars{ display: flex; gap: 4px; color: #F5A623; font-size: 17px; } html.pg-index .testimonial-text{ font-size: 15px; color: var(--text-body); line-height: 1.7; font-style: italic; flex: 1; } html.pg-index .testimonial-author{ display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(123,107,230,0.12); } html.pg-index .author-avatar{ width: 44px; height: 44px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 17px; color: var(--lime); flex-shrink: 0; } html.pg-index .author-name{ font-weight: 700; font-size: 14px; color: var(--text-dark); margin-bottom: 2px; } html.pg-index .author-role{ font-size: 12px; color: var(--text-muted); } /* ============================================= FAQ — Lavender section ============================================= */ html.pg-index .faq-section{ background: var(--bg-lavender); padding: 88px 0; } html.pg-index .faq-layout{ display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; } html.pg-index .faq-left{ position: sticky; top: 100px; } html.pg-index .faq-illus{ margin-top: 40px; width: 200px; height: 200px; border: 3px dashed rgba(123,107,230,0.2); border-radius: var(--radius-xl); background: rgba(123,107,230,0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } html.pg-index .faq-illus .fi-icon{ font-size: 48px; opacity: 0.35; } html.pg-index .faq-illus .fi-label{ font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); opacity: 0.6; } html.pg-index .faq-illus .fi-desc{ font-size: 11px; color: var(--text-muted); line-height: 1.4; } .faq-illus.has-image{ border: none !important; background: transparent !important; padding: 0 !important; height: auto !important; display: block !important; margin-top: 36px; } .faq-illus.has-image img{ width: 100%; max-width: 200px; height: auto; display: block; } @media(max-width:1024px){ .faq-illus{ display: none !important; } } html.pg-index .faq-right{ display: flex; flex-direction: column; gap: 4px; } html.pg-index .faq-item{ background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid rgba(123,107,230,0.1); transition: var(--transition); } html.pg-index .faq-item.open{ border-color: var(--purple); } html.pg-index .faq-question{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text-dark); user-select: none; } html.pg-index .faq-icon{ width: 28px; height: 28px; border-radius: 50%; background: rgba(123,107,230,0.1); display: flex; align-items: center; justify-content: center; color: var(--purple); font-size: 0; flex-shrink: 0; position: relative; transition: var(--transition); } html.pg-index .faq-icon::before, html.pg-index .faq-icon::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); } html.pg-index .faq-icon::after{ width: 2px; height: 10px; } html.pg-index .faq-item.open .faq-icon{ transform: rotate(45deg); background: var(--purple); color: #fff; } html.pg-index .faq-answer{ max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } html.pg-index .faq-item.open .faq-answer{ max-height: 200px; } html.pg-index .faq-answer-inner{ padding: 0 24px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.75; } /* ============================================= CTA SECTION — Purple ============================================= */ html.pg-index .cta-section{ background: var(--purple); padding: 88px 0; position: relative; overflow: hidden; } html.pg-index .cta-section::before{ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.5px); background-size: 36px 36px; } html.pg-index .cta-inner{ position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } html.pg-index .cta-left{ } html.pg-index .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-index .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-index .form-group{margin-bottom:14px} html.pg-index .form-group input, html.pg-index .form-group textarea{width:100%;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--transition);outline:none} html.pg-index .form-group input::placeholder, html.pg-index .form-group textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-index .form-group input:focus, html.pg-index .form-group textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-index .form-group textarea{height:100px;resize:none} html.pg-index .form-dsgvo{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:16px} html.pg-index .form-dsgvo input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime)} html.pg-index .form-dsgvo a{color:var(--lime);text-decoration:underline} html.pg-index .cta-title{ font-family: var(--font-head); font-size: clamp(32px, 4.5vw, 56px); color: var(--lime); line-height: 1.05; margin-bottom: 16px; } html.pg-index .cta-sub{ font-size: 17px; color: rgba(255,255,255,0.8); line-height: 1.65; margin-bottom: 36px; max-width: 460px; } html.pg-index .cta-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } html.pg-index .cta-trust{ display: flex; flex-direction: column; gap: 10px; } html.pg-index .cta-trust-item{ display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; } html.pg-index .cta-trust-check{ color: var(--lime); font-size: 16px; font-weight: 900; } /* ============================================= FOOTER ============================================= */ html.pg-index .footer{ background: var(--bg-lavender); border-top: 1px solid var(--border); padding: 72px 0 32px; } html.pg-index .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } html.pg-index .footer-logo{ font-family: var(--font-head); font-size: 26px; color: var(--text-dark); margin-bottom: 14px; display: flex; align-items: center; gap: 4px; } html.pg-index .footer-desc{ font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; } html.pg-index .footer-socials{ display: flex; gap: 10px; } html.pg-index .social-btn{ width: 40px; height: 40px; border-radius: 10px; background: rgba(123,107,230,0.1); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); cursor: pointer; } html.pg-index .social-btn:hover{ background: var(--purple); border-color: var(--purple); color: #fff; } html.pg-index .footer-col-title{ font-family: var(--font-head); font-size: 14px; color: var(--text-dark); margin-bottom: 18px; } html.pg-index .footer-links{ list-style: none; display: flex; flex-direction: column; gap: 10px; } html.pg-index .footer-links a{ font-size: 14px; color: var(--text-muted); transition: var(--transition); font-weight: 500; } html.pg-index .footer-links a:hover{ color: var(--purple); } html.pg-index .footer-bottom{ display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1.5px solid var(--border); gap: 16px; flex-wrap: wrap; } html.pg-index .footer-copy{ font-size: 13px; color: var(--text-muted); } html.pg-index .footer-legal{ display: flex; gap: 20px; } html.pg-index .footer-legal a{ font-size: 13px; color: var(--text-muted); transition: var(--transition); } html.pg-index .footer-legal a:hover{ color: var(--purple); } /* Marquee */ html.pg-index .marquee-pg-index-wrap{ overflow: hidden; background: var(--text-dark); padding: 16px 0; } html.pg-index .marquee-pg-index-track{ display: flex; gap: 40px; animation: marquee-pg-index 28s linear infinite; white-space: nowrap; } html.pg-index .marquee-pg-index-item{ display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 14px; color: rgba(255,255,255,0.6); flex-shrink: 0; } html.pg-index .marquee-pg-index-bullet{ color: var(--lime); } @keyframes marquee-pg-index { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* WhatsApp float */ html.pg-index .wa-float{ position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 24px rgba(37,211,102,0.4); cursor: pointer; transition: var(--transition); } html.pg-index .wa-float:hover{ transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,0.5); } html.pg-index .fade-up:nth-child(2){ transition-delay: 0.1s; } html.pg-index .fade-up:nth-child(3){ transition-delay: 0.2s; } html.pg-index .fade-up:nth-child(4){ transition-delay: 0.3s; } /* Responsive */ @media (max-width: 1024px) { html.pg-index .hero-bottom{ grid-template-columns: 1fr; } html.pg-index .hero-card-right{ min-height: 280px; border-radius: var(--radius-xl); } html.pg-index .hero-card-left{ border-radius: var(--radius-xl); } html.pg-index .services-header{ grid-template-columns: 1fr; } html.pg-index .services-header-right{ text-align: left; } html.pg-index .services-grid{ grid-template-columns: 1fr; } html.pg-index .why-grid{ grid-template-columns: 1fr; } html.pg-index .why-illus-side{ display: none; } html.pg-index .features-grid{ grid-template-columns: 1fr 1fr; } html.pg-index .portfolio-grid{ grid-template-columns: 1fr; } html.pg-index .industries-grid{ grid-template-columns: repeat(2, 1fr); } html.pg-index .regions-grid{ grid-template-columns: repeat(2, 1fr); } html.pg-index .process-step-row{ grid-template-columns: 1fr; gap: 32px; } html.pg-index .process-step-row.reverse{ direction: ltr; } html.pg-index .testimonials-grid{ grid-template-columns: 1fr; } html.pg-index .faq-layout{ grid-template-columns: 1fr; } html.pg-index .faq-left{ position: static; } html.pg-index .faq-illus{ display: none; } html.pg-index .cta-inner{ grid-template-columns: 1fr; } html.pg-index .cta-illus{ display: none; } html.pg-index .footer-grid{ grid-template-columns: 1fr 1fr; } html.pg-index .nav-links{ display: none; } html.pg-index .nav-menu-btn{ display: flex; } html.pg-index .nav-cta .btn-outline{ display: none; } html.pg-index .stat-item{ padding: 20px 24px; } } @media (max-width: 640px) { html.pg-index .container{ padding: 0 18px; } html.pg-index .section{ padding: 64px 0; } html.pg-index .hero{ min-height: auto; padding-top: 80px; } html.pg-index .hero-title{ font-size: clamp(36px, 9vw, 56px); } html.pg-index .hero-subtitle-main{ font-size: clamp(20px, 5.5vw, 32px); } html.pg-index .hero-character{ width: clamp(70px, 16vw, 100px); margin-right: -8px; } html.pg-index .hero-bottom{ gap: 12px; } html.pg-index .hero-card-left{ padding: 24px; } html.pg-index .stats-row{ flex-direction: column; } html.pg-index .stat-item{ border-right: none; border-bottom: 1px solid var(--border); width: 100%; } html.pg-index .stat-item:last-child{ border-bottom: none; } html.pg-index .features-grid{ grid-template-columns: 1fr; } html.pg-index .industries-grid{ grid-template-columns: 1fr 1fr; } html.pg-index .regions-grid{ grid-template-columns: 1fr; } html.pg-index .footer-grid{ grid-template-columns: 1fr; gap: 28px; } html.pg-index .footer-bottom{ flex-direction: column; text-align: center; } html.pg-index .hero-card-actions{ flex-direction: column; } html.pg-index .hero-card-actions .btn{ width: 100%; justify-content: center; } html.pg-index .cta-actions{ flex-direction: column; } html.pg-index .cta-actions .btn{ width: 100%; justify-content: center; } html.pg-index .process-step-illus{ min-height: 180px; } html.pg-index .display-xl{ font-size: 32px; } html.pg-index .display-lg{ font-size: 26px; } html.pg-index .testimonials-header{ text-align: center; } html.pg-index .testimonials-header-body{ flex-direction: column; align-items: center; gap: 24px; } html.pg-index .testimonials-header-left{ text-align: center; } html.pg-index .testimonials-header-left > div[style]{ justify-content: center; } html.pg-index .testimonials-header-right{ width: 100%; display: flex; justify-content: center; } html.pg-index .google-review-link{ flex-direction: column; align-items: center; gap: 12px; } html.pg-index .google-review-img{ width: 140px; } html.pg-index .google-review-cta{ white-space: normal; font-size: 14px; text-align: center; } } html.pg-index .contact-form ::placeholder{color:rgba(255,255,255,0.55);opacity:1;} /* ==================================================================== PAGE: kontakt.html (scoped under html.pg-kontakt) ==================================================================== */ /* ============================================================ e-wola SHARED DESIGN SYSTEM v1.0 Sociell-inspired · Light theme · Purple + Lime Fonts: Dela Gothic One (headings) + Plus Jakarta Sans (body) ============================================================ */ /* SECURITY: Content Security Policy added in each page head */ html.pg-kontakt{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* BUTTONS */ html.pg-kontakt .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;letter-spacing:-0.01em;line-height:1} html.pg-kontakt .btn-lg{padding:18px 40px;font-size:16px} /* BADGE */ html.pg-kontakt .badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(123,107,230,0.25);border-radius:var(--radius-pill);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(123,107,230,0.08);color:var(--purple)} /* ILLUS PLACEHOLDER */ html.pg-kontakt .illus{background:rgba(123,107,230,0.06);border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} html.pg-kontakt .illus-icon{font-size:52px;opacity:0.35} html.pg-kontakt .illus-lbl{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-kontakt .illus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* NAV */ html.pg-kontakt .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background var(--t),box-shadow var(--t)} html.pg-kontakt .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-kontakt .nav:has(~ .mnav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-kontakt .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-kontakt .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px;letter-spacing:-0.5px} html.pg-kontakt .nav-logo-dot{color:var(--purple)} html.pg-kontakt .nav-links{display:flex;align-items:center;gap:2px} html.pg-kontakt .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--t)} html.pg-kontakt .nav-links a:hover, html.pg-kontakt .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-kontakt .nav:not(.scrolled) .nav-links a:hover, html.pg-kontakt .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-kontakt .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-kontakt .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-kontakt .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-kontakt .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-kontakt .nav-drop{position:relative} html.pg-kontakt .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} html.pg-kontakt .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow-md);pointer-events:none} html.pg-kontakt .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} html.pg-kontakt .nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500;transition:var(--t)} html.pg-kontakt .nav-drop-menu a:hover{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-kontakt .nav-drop-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-kontakt .nav-cta{display:flex;align-items:center;gap:10px} html.pg-kontakt .nav-hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--text-dark);font-size:18px;line-height:1} /* MOBILE NAV */ html.pg-kontakt .mnav{display:none;position:fixed;inset:0;z-index:99;background:#fff;flex-direction:column;padding:90px 28px 40px;overflow-y:auto;gap:0} html.pg-kontakt .mnav.open{display:flex} html.pg-kontakt .mnav-link{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:15px 0;border-bottom:1px solid var(--border);display:block;transition:var(--t)} html.pg-kontakt .mnav-link:hover, html.pg-kontakt .mnav-link.active{color:var(--purple)} html.pg-kontakt .mnav-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} /* BREADCRUMB */ html.pg-kontakt .bc{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-kontakt .bc a{color:rgba(255,255,255,0.6);transition:var(--t)} html.pg-kontakt .bc a:hover{color:#fff} html.pg-kontakt .bc-sep{color:rgba(255,255,255,0.3)} /* PAGE HERO (inner pages) */ html.pg-kontakt .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-kontakt .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-kontakt .page-hero-wrap{position:relative;z-index:1;max-width:760px} html.pg-kontakt .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-kontakt .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-kontakt .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} html.pg-kontakt .hero-stats{display:flex;flex-wrap:wrap;gap:0} html.pg-kontakt .hs-item{padding:18px 28px;border-right:1px solid rgba(255,255,255,0.15)} html.pg-kontakt .hs-item:first-child{padding-left:0} html.pg-kontakt .hs-item:last-child{border-right:none} html.pg-kontakt .hs-num{font-family:var(--font-head);font-size:clamp(26px,3.5vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-kontakt .hs-lbl{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* SECTION HEADER */ html.pg-kontakt .sec-hd{margin-bottom:56px} html.pg-kontakt .sec-hd-c{text-align:center;margin-bottom:56px} html.pg-kontakt .sec-hd .badge, html.pg-kontakt .sec-hd-c .badge{margin-bottom:16px} /* PROCESS STEPS */ html.pg-kontakt .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-kontakt .steps::after{content:'';position:absolute;top:31px;left:8%;right:8%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-kontakt .step{text-align:center;padding:0 10px;position:relative;z-index:1} html.pg-kontakt .step-circle{width:62px;height:62px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;margin:0 auto 16px;transition:var(--t)} html.pg-kontakt .step:hover .step-circle{background:var(--purple);transform:scale(1.08)} html.pg-kontakt .step-title{font-family:var(--font-head);font-size:13px;color:var(--text-dark);margin-bottom:6px} html.pg-kontakt .step-desc{font-size:12px;color:var(--text-body);line-height:1.55} /* PORTFOLIO CARD */ html.pg-kontakt .port-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column} html.pg-kontakt .port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-kontakt .port-img{min-height:200px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0} html.pg-kontakt .port-img-inner{text-align:center;padding:24px} html.pg-kontakt .pi-icon{font-size:38px;opacity:0.32;margin-bottom:8px} html.pg-kontakt .pi-lbl{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-kontakt .pi-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-kontakt .port-info{padding:20px 24px;flex:1;display:flex;flex-direction:column} html.pg-kontakt .port-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-kontakt .port-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:4px} html.pg-kontakt .port-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px;flex:1} html.pg-kontakt .port-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-kontakt .pm-num{font-family:var(--font-head);font-size:18px;color:var(--lime)} html.pg-kontakt .pm-lbl{font-size:11px;color:rgba(255,255,255,0.45)} html.pg-kontakt .port-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--t)} html.pg-kontakt .port-link:hover{background:var(--purple)} /* TESTIMONIAL CARD */ html.pg-kontakt .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--t)} html.pg-kontakt .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-kontakt .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-kontakt .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-kontakt .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-kontakt .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-kontakt .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-kontakt .author-role{font-size:12px;color:var(--text-muted)} /* FAQ */ html.pg-kontakt .faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-kontakt .faq-sticky{position:sticky;top:100px} html.pg-kontakt .faq-list{display:flex;flex-direction:column;gap:4px} html.pg-kontakt .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--t)} html.pg-kontakt .faq-item.open{border-color:var(--purple)} html.pg-kontakt .faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-kontakt .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:transform var(--t),background var(--t)} html.pg-kontakt .faq-icon{position:relative;font-size:0!important} html.pg-kontakt .faq-icon::before, html.pg-kontakt .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-kontakt .faq-icon::after{width:2px;height:9px} html.pg-kontakt .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-kontakt .faq-ans{max-height:0;overflow:hidden;transition:max-height 0.32s ease} html.pg-kontakt .faq-item.open .faq-ans{max-height:250px} html.pg-kontakt .faq-ans-inner{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.75} /* REGION CARD */ html.pg-kontakt .region-card{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--t)} html.pg-kontakt .region-card:hover{background:rgba(255,255,255,0.18);border-color:var(--lime);transform:translateX(4px)} html.pg-kontakt .region-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-kontakt .region-name{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:1px} html.pg-kontakt .region-sub{font-size:11px;color:rgba(255,255,255,0.55)} html.pg-kontakt .region-arrow{margin-left:auto;color:rgba(255,255,255,0.4);transition:var(--t);font-size:13px} html.pg-kontakt .region-card:hover .region-arrow{color:var(--lime)} /* WHY ITEM */ html.pg-kontakt .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--t)} html.pg-kontakt .why-item:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translateX(4px)} html.pg-kontakt .why-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-kontakt .why-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-kontakt .why-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* CTA SECTION */ html.pg-kontakt .cta-sec{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-kontakt .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-kontakt .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-kontakt .cta-h{font-family:var(--font-head);font-size:clamp(28px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-kontakt .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-kontakt .cta-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-kontakt .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-kontakt .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-kontakt .cta-tick{color:var(--lime);font-weight:900} /* CTA FORM */ html.pg-kontakt .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-kontakt .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-kontakt .fg{margin-bottom:14px} html.pg-kontakt .fg input, html.pg-kontakt .fg textarea, html.pg-kontakt .fg select{width:100%;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--t);outline:none;-webkit-appearance:none;appearance:none} html.pg-kontakt .fg input::placeholder, html.pg-kontakt .fg textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-kontakt .fg input:focus, html.pg-kontakt .fg textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-kontakt .fg textarea{height:96px;resize:vertical} html.pg-kontakt .form-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.5} html.pg-kontakt .form-check input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime);cursor:pointer} html.pg-kontakt .form-check a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-kontakt .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:72px 0 32px} html.pg-kontakt .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} html.pg-kontakt .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:4px} html.pg-kontakt .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-kontakt .footer-contact a{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:5px;transition:var(--t)} html.pg-kontakt .footer-contact a:hover{color:var(--purple)} html.pg-kontakt .footer-socials{display:flex;gap:8px;margin-top:18px} html.pg-kontakt .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--t);cursor:pointer} html.pg-kontakt .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-kontakt .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px;letter-spacing:-0.2px} html.pg-kontakt .footer-links{display:flex;flex-direction:column;gap:9px} html.pg-kontakt .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--t);font-weight:500} html.pg-kontakt .footer-links a:hover{color:var(--purple)} html.pg-kontakt .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-kontakt .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-kontakt .footer-legal{display:flex;gap:18px} html.pg-kontakt .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--t)} html.pg-kontakt .footer-legal a:hover{color:var(--purple)} /* WHATSAPP FLOAT */ html.pg-kontakt .wa-btn{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);transition:var(--t);text-decoration:none;border:none;cursor:pointer} html.pg-kontakt .wa-btn:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5)} html.pg-kontakt .fade-up:nth-child(1){transition-delay:0s} html.pg-kontakt .fade-up:nth-child(2){transition-delay:0.08s} html.pg-kontakt .fade-up:nth-child(3){transition-delay:0.16s} html.pg-kontakt .fade-up:nth-child(4){transition-delay:0.24s} html.pg-kontakt .fade-up:nth-child(5){transition-delay:0.32s} /* MARQUEE */ html.pg-kontakt .marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} html.pg-kontakt .marquee-track{display:flex;gap:0;animation:mq-pg-kontakt 24s linear infinite;white-space:nowrap;width:max-content} html.pg-kontakt .marquee-track:hover{animation-play-state:paused} html.pg-kontakt .mq-pg-kontakt-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;padding:0 24px;color:var(--text-light);opacity:0.55;transition:var(--t);flex-shrink:0} html.pg-kontakt .mq-pg-kontakt-item:hover{opacity:1;color:var(--purple)} html.pg-kontakt .mq-pg-kontakt-sep{color:var(--purple);font-size:12px;opacity:0.3;flex-shrink:0} @keyframes mq-pg-kontakt{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SKIP LINK */ html.pg-kontakt .skip-link{position:absolute;top:-60px;left:16px;background:var(--purple);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;z-index:999;transition:top 0.2s} html.pg-kontakt .skip-link:focus{top:16px} /* RESPONSIVE SYSTEM */ @media(max-width:1100px){ html.pg-kontakt .grid-2{gap:48px} html.pg-kontakt .cta-inner{gap:48px} html.pg-kontakt .faq-wrap{gap:48px} html.pg-kontakt .footer-grid{grid-template-columns:1fr 1fr;gap:40px} } @media(max-width:960px){ html.pg-kontakt .nav-links, html.pg-kontakt .nav-cta .btn-outline{display:none} html.pg-kontakt .nav-hamburger{display:flex;align-items:center;justify-content:center} html.pg-kontakt .grid-2, html.pg-kontakt .cta-inner, html.pg-kontakt .faq-wrap{grid-template-columns:1fr} html.pg-kontakt .faq-sticky{position:static} html.pg-kontakt .steps{grid-template-columns:1fr 1fr;gap:24px} html.pg-kontakt .steps::after{display:none} html.pg-kontakt .grid-3{grid-template-columns:1fr 1fr} html.pg-kontakt .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:640px){ html.pg-kontakt .container{padding:0 18px} html.pg-kontakt .s{padding:60px 0} html.pg-kontakt .s-sm{padding:48px 0} html.pg-kontakt .s-lg{padding:72px 0} html.pg-kontakt .page-hero{padding:106px 0 56px} html.pg-kontakt .page-hero-actions, html.pg-kontakt .cta-acts, html.pg-kontakt .mnav-cta{flex-direction:column} html.pg-kontakt .page-hero-actions .btn, html.pg-kontakt .cta-acts .btn, html.pg-kontakt .mnav-cta .btn{width:100%;justify-content:center} html.pg-kontakt .hero-stats{flex-direction:column} html.pg-kontakt .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:12px 0} html.pg-kontakt .hs-item:last-child{border-bottom:none} html.pg-kontakt .grid-3, html.pg-kontakt .grid-4{grid-template-columns:1fr} html.pg-kontakt .steps{grid-template-columns:1fr} html.pg-kontakt .steps::after{display:none} html.pg-kontakt .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-kontakt .footer-bottom{flex-direction:column;text-align:center} html.pg-kontakt .sec-hd, html.pg-kontakt .sec-hd-c{margin-bottom:40px} } /* ==================================================================== PAGE: logo-design-agentur.html (scoped under html.pg-logo-design-agentur) ==================================================================== */ /* ============================================================ e-wola SHARED DESIGN SYSTEM v1.0 Sociell-inspired · Light theme · Purple + Lime Fonts: Dela Gothic One (headings) + Plus Jakarta Sans (body) ============================================================ */ /* SECURITY: Content Security Policy added in each page head */ html.pg-logo-design-agentur{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* BUTTONS */ html.pg-logo-design-agentur .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;letter-spacing:-0.01em;line-height:1} html.pg-logo-design-agentur .btn-outline{border:2px solid var(--text-dark);padding:15px 31px;} html.pg-logo-design-agentur .btn-white{background:#fff;color:var(--text-dark);padding:16px 32px;} html.pg-logo-design-agentur .btn-lg{padding:18px 40px;font-size:16px} /* BADGE */ html.pg-logo-design-agentur .badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(123,107,230,0.25);border-radius:var(--radius-pill);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(123,107,230,0.08);color:var(--purple)} /* ILLUS PLACEHOLDER */ html.pg-logo-design-agentur .illus{background:rgba(123,107,230,0.06);border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} html.pg-logo-design-agentur .illus-icon{font-size:52px;opacity:0.35} html.pg-logo-design-agentur .illus-lbl{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-logo-design-agentur .illus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* NAV */ html.pg-logo-design-agentur .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background var(--t),box-shadow var(--t)} html.pg-logo-design-agentur .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-logo-design-agentur .nav:has(~ .mnav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-logo-design-agentur .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-logo-design-agentur .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px;letter-spacing:-0.5px} html.pg-logo-design-agentur .nav-logo-dot{color:var(--purple)} html.pg-logo-design-agentur .nav-links{display:flex;align-items:center;gap:2px} html.pg-logo-design-agentur .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--t)} html.pg-logo-design-agentur .nav-links a:hover, html.pg-logo-design-agentur .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-logo-design-agentur .nav:not(.scrolled) .nav-links a:hover, html.pg-logo-design-agentur .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-logo-design-agentur .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-logo-design-agentur .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-logo-design-agentur .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-logo-design-agentur .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-logo-design-agentur .nav-drop{position:relative} html.pg-logo-design-agentur .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} html.pg-logo-design-agentur .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow-md);pointer-events:none} html.pg-logo-design-agentur .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} html.pg-logo-design-agentur .nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500;transition:var(--t)} html.pg-logo-design-agentur .nav-drop-menu a:hover{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-logo-design-agentur .nav-drop-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-logo-design-agentur .nav-cta{display:flex;align-items:center;gap:10px} html.pg-logo-design-agentur .nav-hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--text-dark);font-size:18px;line-height:1} /* MOBILE NAV */ html.pg-logo-design-agentur .mnav{display:none;position:fixed;inset:0;z-index:99;background:#fff;flex-direction:column;padding:90px 28px 40px;overflow-y:auto;gap:0} html.pg-logo-design-agentur .mnav.open{display:flex} html.pg-logo-design-agentur .mnav-link{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:15px 0;border-bottom:1px solid var(--border);display:block;transition:var(--t)} html.pg-logo-design-agentur .mnav-link:hover, html.pg-logo-design-agentur .mnav-link.active{color:var(--purple)} html.pg-logo-design-agentur .mnav-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} /* BREADCRUMB */ html.pg-logo-design-agentur .bc{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-logo-design-agentur .bc a{color:rgba(255,255,255,0.6);transition:var(--t)} html.pg-logo-design-agentur .bc a:hover{color:#fff} html.pg-logo-design-agentur .bc-sep{color:rgba(255,255,255,0.3)} /* PAGE HERO (inner pages) */ html.pg-logo-design-agentur .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-logo-design-agentur .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-logo-design-agentur .page-hero-wrap{position:relative;z-index:1;max-width:990px} html.pg-logo-design-agentur .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-logo-design-agentur .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-logo-design-agentur .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} html.pg-logo-design-agentur .hero-stats{display:flex;flex-wrap:wrap;gap:0} html.pg-logo-design-agentur .hs-item{padding:18px 28px;border-right:1px solid rgba(255,255,255,0.15);text-align:center} html.pg-logo-design-agentur .hs-item:first-child{padding-left:0} html.pg-logo-design-agentur .hs-item:last-child{border-right:none} html.pg-logo-design-agentur .hs-num{font-family:var(--font-head);font-size:clamp(26px,3.5vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-logo-design-agentur .hs-lbl{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* SECTION HEADER */ html.pg-logo-design-agentur .sec-hd{margin-bottom:56px} html.pg-logo-design-agentur .sec-hd-c{text-align:center;margin-bottom:56px} html.pg-logo-design-agentur .sec-hd .badge, html.pg-logo-design-agentur .sec-hd-c .badge{margin-bottom:16px} /* PROCESS STEPS */ html.pg-logo-design-agentur .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-logo-design-agentur .steps::after{content:'';position:absolute;top:31px;left:8%;right:8%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-logo-design-agentur .step{text-align:center;padding:0 10px;position:relative;z-index:1} html.pg-logo-design-agentur .step-circle{width:62px;height:62px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;margin:0 auto 16px;transition:var(--t)} html.pg-logo-design-agentur .step:hover .step-circle{background:var(--purple);transform:scale(1.08)} html.pg-logo-design-agentur .step-title{font-family:var(--font-head);font-size:13px;color:var(--text-dark);margin-bottom:6px} html.pg-logo-design-agentur .step-desc{font-size:12px;color:var(--text-body);line-height:1.55} /* PORTFOLIO CARD */ html.pg-logo-design-agentur .port-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column;border:1.5px solid var(--border);box-shadow:var(--shadow-sm)} html.pg-logo-design-agentur .port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-logo-design-agentur .port-img{min-height:200px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0} html.pg-logo-design-agentur .port-img-inner{text-align:center;padding:24px} html.pg-logo-design-agentur .pi-icon{font-size:38px;opacity:0.32;margin-bottom:8px} html.pg-logo-design-agentur .pi-lbl{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-logo-design-agentur .pi-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-logo-design-agentur .port-info{padding:20px 24px;flex:1;display:flex;flex-direction:column} html.pg-logo-design-agentur .port-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-logo-design-agentur .port-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:4px} html.pg-logo-design-agentur .port-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px;flex:1} html.pg-logo-design-agentur .port-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-logo-design-agentur .pm-num{font-family:var(--font-head);font-size:18px;color:var(--lime)} html.pg-logo-design-agentur .pm-lbl{font-size:11px;color:rgba(255,255,255,0.45)} html.pg-logo-design-agentur .port-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--t)} html.pg-logo-design-agentur .port-link:hover{background:var(--purple)} /* TESTIMONIAL CARD */ html.pg-logo-design-agentur .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--t)} html.pg-logo-design-agentur .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-logo-design-agentur .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-logo-design-agentur .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-logo-design-agentur .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-logo-design-agentur .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-logo-design-agentur .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-logo-design-agentur .author-role{font-size:12px;color:var(--text-muted)} /* FAQ */ html.pg-logo-design-agentur .faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-logo-design-agentur .faq-sticky{position:sticky;top:100px} html.pg-logo-design-agentur .faq-list{display:flex;flex-direction:column;gap:4px} html.pg-logo-design-agentur .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--t)} html.pg-logo-design-agentur .faq-item.open{border-color:var(--purple)} html.pg-logo-design-agentur .faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-logo-design-agentur .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:transform var(--t),background var(--t)} html.pg-logo-design-agentur .faq-icon{position:relative;font-size:0!important} html.pg-logo-design-agentur .faq-icon::before, html.pg-logo-design-agentur .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-logo-design-agentur .faq-icon::after{width:2px;height:9px} html.pg-logo-design-agentur .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-logo-design-agentur .faq-ans{max-height:0;overflow:hidden;transition:max-height 0.32s ease} html.pg-logo-design-agentur .faq-item.open .faq-ans{max-height:250px} html.pg-logo-design-agentur .faq-ans-inner{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.75} /* REGION CARD */ html.pg-logo-design-agentur .region-card{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--t)} html.pg-logo-design-agentur .region-card:hover{background:rgba(255,255,255,0.18);border-color:var(--lime);transform:translateX(4px)} html.pg-logo-design-agentur .region-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-logo-design-agentur .region-name{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:1px} html.pg-logo-design-agentur .region-sub{font-size:11px;color:rgba(255,255,255,0.55)} html.pg-logo-design-agentur .region-arrow{margin-left:auto;color:rgba(255,255,255,0.4);transition:var(--t);font-size:13px} html.pg-logo-design-agentur .region-card:hover .region-arrow{color:var(--lime)} /* WHY ITEM */ html.pg-logo-design-agentur .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--t)} html.pg-logo-design-agentur .why-item:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translateX(4px)} html.pg-logo-design-agentur .why-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-logo-design-agentur .why-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-logo-design-agentur .why-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* CTA SECTION */ html.pg-logo-design-agentur .cta-sec{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-logo-design-agentur .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-logo-design-agentur .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-logo-design-agentur .cta-h{font-family:var(--font-head);font-size:clamp(28px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-logo-design-agentur .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-logo-design-agentur .cta-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-logo-design-agentur .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-logo-design-agentur .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-logo-design-agentur .cta-tick{color:var(--lime);font-weight:900} /* CTA FORM */ html.pg-logo-design-agentur .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-logo-design-agentur .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-logo-design-agentur .fg{margin-bottom:14px} html.pg-logo-design-agentur .fg input, html.pg-logo-design-agentur .fg textarea, html.pg-logo-design-agentur .fg select{width:100%;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--t);outline:none;-webkit-appearance:none;appearance:none} html.pg-logo-design-agentur .fg input::placeholder, html.pg-logo-design-agentur .fg textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-logo-design-agentur .fg input:focus, html.pg-logo-design-agentur .fg textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-logo-design-agentur .fg textarea{height:96px;resize:vertical} html.pg-logo-design-agentur .form-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.5} html.pg-logo-design-agentur .form-check input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime);cursor:pointer} html.pg-logo-design-agentur .form-check a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-logo-design-agentur .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:72px 0 32px} html.pg-logo-design-agentur .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} html.pg-logo-design-agentur .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:4px} html.pg-logo-design-agentur .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-logo-design-agentur .footer-contact a{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:5px;transition:var(--t)} html.pg-logo-design-agentur .footer-contact a:hover{color:var(--purple)} html.pg-logo-design-agentur .footer-socials{display:flex;gap:8px;margin-top:18px} html.pg-logo-design-agentur .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--t);cursor:pointer} html.pg-logo-design-agentur .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-logo-design-agentur .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px;letter-spacing:-0.2px} html.pg-logo-design-agentur .footer-links{display:flex;flex-direction:column;gap:9px} html.pg-logo-design-agentur .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--t);font-weight:500} html.pg-logo-design-agentur .footer-links a:hover{color:var(--purple)} html.pg-logo-design-agentur .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-logo-design-agentur .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-logo-design-agentur .footer-legal{display:flex;gap:18px} html.pg-logo-design-agentur .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--t)} html.pg-logo-design-agentur .footer-legal a:hover{color:var(--purple)} /* WHATSAPP FLOAT */ html.pg-logo-design-agentur .wa-btn{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);transition:var(--t);text-decoration:none;border:none;cursor:pointer} html.pg-logo-design-agentur .wa-btn:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5)} html.pg-logo-design-agentur .fade-up:nth-child(1){transition-delay:0s} html.pg-logo-design-agentur .fade-up:nth-child(2){transition-delay:0.08s} html.pg-logo-design-agentur .fade-up:nth-child(3){transition-delay:0.16s} html.pg-logo-design-agentur .fade-up:nth-child(4){transition-delay:0.24s} html.pg-logo-design-agentur .fade-up:nth-child(5){transition-delay:0.32s} /* MARQUEE */ html.pg-logo-design-agentur .marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} html.pg-logo-design-agentur .marquee-track{display:flex;gap:0;animation:mq-pg-logo-design-agentur 24s linear infinite;white-space:nowrap;width:max-content} html.pg-logo-design-agentur .marquee-track:hover{animation-play-state:paused} html.pg-logo-design-agentur .mq-pg-logo-design-agentur-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;padding:0 24px;color:var(--text-light);opacity:0.55;transition:var(--t);flex-shrink:0} html.pg-logo-design-agentur .mq-pg-logo-design-agentur-item:hover{opacity:1;color:var(--purple)} html.pg-logo-design-agentur .mq-pg-logo-design-agentur-sep{color:var(--purple);font-size:12px;opacity:0.3;flex-shrink:0} @keyframes mq-pg-logo-design-agentur{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SKIP LINK */ html.pg-logo-design-agentur .skip-link{position:absolute;top:-60px;left:16px;background:var(--purple);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;z-index:999;transition:top 0.2s} html.pg-logo-design-agentur .skip-link:focus{top:16px} /* RESPONSIVE SYSTEM */ @media(max-width:1100px){ html.pg-logo-design-agentur .grid-2{gap:48px} html.pg-logo-design-agentur .cta-inner{gap:48px} html.pg-logo-design-agentur .faq-wrap{gap:48px} html.pg-logo-design-agentur .footer-grid{grid-template-columns:1fr 1fr;gap:40px} } @media(max-width:960px){ html.pg-logo-design-agentur .nav-links, html.pg-logo-design-agentur .nav-cta .btn-outline{display:none} html.pg-logo-design-agentur .nav-hamburger{display:flex;align-items:center;justify-content:center} html.pg-logo-design-agentur .grid-2, html.pg-logo-design-agentur .cta-inner, html.pg-logo-design-agentur .faq-wrap{grid-template-columns:1fr} html.pg-logo-design-agentur .faq-sticky{position:static} html.pg-logo-design-agentur .steps{grid-template-columns:1fr 1fr;gap:24px} html.pg-logo-design-agentur .steps::after{display:none} html.pg-logo-design-agentur .grid-3{grid-template-columns:1fr 1fr} html.pg-logo-design-agentur .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:640px){ html.pg-logo-design-agentur .container{padding:0 18px} html.pg-logo-design-agentur .s{padding:60px 0} html.pg-logo-design-agentur .s-sm{padding:48px 0} html.pg-logo-design-agentur .s-lg{padding:72px 0} html.pg-logo-design-agentur .page-hero{padding:106px 0 56px} html.pg-logo-design-agentur .page-hero-actions, html.pg-logo-design-agentur .cta-acts, html.pg-logo-design-agentur .mnav-cta{flex-direction:column} html.pg-logo-design-agentur .page-hero-actions .btn, html.pg-logo-design-agentur .cta-acts .btn, html.pg-logo-design-agentur .mnav-cta .btn{width:100%;justify-content:center} html.pg-logo-design-agentur .hero-stats{flex-direction:column} html.pg-logo-design-agentur .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:12px 0} html.pg-logo-design-agentur .hs-item:last-child{border-bottom:none} html.pg-logo-design-agentur .grid-3, html.pg-logo-design-agentur .grid-4{grid-template-columns:1fr} html.pg-logo-design-agentur .steps{grid-template-columns:1fr} html.pg-logo-design-agentur .steps::after{display:none} html.pg-logo-design-agentur .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-logo-design-agentur .footer-bottom{flex-direction:column;text-align:center} html.pg-logo-design-agentur .sec-hd, html.pg-logo-design-agentur .sec-hd-c{margin-bottom:40px} } /* ==================================================================== PAGE: onlineshop-agentur.html (scoped under html.pg-onlineshop-agentur) ==================================================================== */ html.pg-onlineshop-agentur{--white:#FFF;--off-white:#F8F7FF;--bg-lavender:#ECEAFF;--bg-card:#D8D5F5;--bg-card2:#E2E0F8;--purple:#7B6BE6;--purple-dark:#5A4BD4;--purple-hero:#7B6FE8;--lime:#CBFF4D;--lime-dark:#B8F020;--lime-section:#D4FF6E;--text-dark:#0F0D1A;--text-body:#2D2B3D;--text-muted:#6E6B85;--text-light:#9896A8;--border:rgba(123,107,230,0.15);--font-head:'Dela Gothic One',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:100px;--shadow-sm:0 2px 12px rgba(123,107,230,0.1);--shadow-md:0 8px 32px rgba(123,107,230,0.15);--shadow-lg:0 20px 60px rgba(123,107,230,0.2);--transition:0.25s cubic-bezier(0.4,0,0.2,1)} html.pg-onlineshop-agentur{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} html.pg-onlineshop-agentur .display-lg{font-family:var(--font-head);font-size:clamp(28px,3.8vw,48px);line-height:1.1;color:var(--text-dark)} html.pg-onlineshop-agentur .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--transition);white-space:nowrap;text-decoration:none} html.pg-onlineshop-agentur .btn-primary:hover{background:#1a1730;transform:translateY(-2px)} html.pg-onlineshop-agentur .btn-lime:hover{background:var(--lime-dark);transform:translateY(-2px)} html.pg-onlineshop-agentur .btn-outline{border:2px solid var(--text-dark);padding:15px 31px;} html.pg-onlineshop-agentur .btn-outline:hover{background:var(--text-dark);color:#fff;} html.pg-onlineshop-agentur .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:var(--transition)} html.pg-onlineshop-agentur .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-onlineshop-agentur .nav:has(~ .mobile-nav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-onlineshop-agentur .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-onlineshop-agentur .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px} html.pg-onlineshop-agentur .nav-logo-accent{color:var(--purple)} html.pg-onlineshop-agentur .nav-links{display:flex;align-items:center;gap:2px;list-style:none} html.pg-onlineshop-agentur .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--transition)} html.pg-onlineshop-agentur .nav-links a:hover, html.pg-onlineshop-agentur .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-links a:hover, html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-onlineshop-agentur .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-onlineshop-agentur .nav-dropdown{position:relative} html.pg-onlineshop-agentur .nav-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} html.pg-onlineshop-agentur .nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:230px;opacity:0;visibility:hidden;transition:var(--transition);box-shadow:var(--shadow-md)} html.pg-onlineshop-agentur .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible} html.pg-onlineshop-agentur .nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500} html.pg-onlineshop-agentur .nav-dropdown-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-onlineshop-agentur .nav-dropdown-menu a:hover, html.pg-onlineshop-agentur .nav-dropdown-menu a.active{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-onlineshop-agentur .nav-cta{display:flex;align-items:center;gap:10px} html.pg-onlineshop-agentur .nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text-dark);font-size:22px} html.pg-onlineshop-agentur .mobile-nav{display:none;position:fixed;inset:0;z-index:99;background:#fff;padding:90px 28px 40px;flex-direction:column;gap:4px;overflow-y:auto} html.pg-onlineshop-agentur .mobile-nav.open{display:flex} html.pg-onlineshop-agentur .mobile-nav>a{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:14px 0;border-bottom:1px solid var(--border);display:block} html.pg-onlineshop-agentur .mobile-nav>a:hover, html.pg-onlineshop-agentur .mobile-nav>a.active{color:var(--purple);font-weight:700} html.pg-onlineshop-agentur .mobile-nav-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px} html.pg-onlineshop-agentur .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-onlineshop-agentur .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.06) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-onlineshop-agentur .page-hero-inner{position:relative;z-index:1;max-width:990px} html.pg-onlineshop-agentur .breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-onlineshop-agentur .breadcrumb a{color:rgba(255,255,255,0.6)} html.pg-onlineshop-agentur .breadcrumb a:hover{color:#fff} html.pg-onlineshop-agentur .breadcrumb-sep{color:rgba(255,255,255,0.3)} html.pg-onlineshop-agentur .page-hero h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-onlineshop-agentur .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-onlineshop-agentur .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px} html.pg-onlineshop-agentur .page-hero-stats{display:flex;gap:0;flex-wrap:wrap} html.pg-onlineshop-agentur .hero-stat-item{padding:16px 28px;border-right:1px solid rgba(255,255,255,0.15);text-align:center} html.pg-onlineshop-agentur .hero-stat-item:first-child{padding-left:0} html.pg-onlineshop-agentur .hero-stat-item:last-child{border-right:none} html.pg-onlineshop-agentur .hsi-num{font-family:var(--font-head);font-size:clamp(26px,4vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-onlineshop-agentur .hsi-label{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* Features grid */ html.pg-onlineshop-agentur .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px} html.pg-onlineshop-agentur .feature-card{background:var(--bg-card2);border-radius:var(--radius-lg);padding:28px;transition:var(--transition);border:1px solid var(--border)} html.pg-onlineshop-agentur .feature-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-onlineshop-agentur .feature-icon{font-size:32px;margin-bottom:14px} html.pg-onlineshop-agentur .feature-title{font-family:var(--font-head);font-size:17px;color:var(--text-dark);margin-bottom:8px} html.pg-onlineshop-agentur .feature-desc{font-size:13px;color:var(--text-muted);line-height:1.65} /* Payment methods */ html.pg-onlineshop-agentur .payment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px} html.pg-onlineshop-agentur .payment-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:center;gap:12px;transition:var(--transition)} html.pg-onlineshop-agentur .payment-card:hover{border-color:var(--purple);background:var(--bg-lavender)} html.pg-onlineshop-agentur .payment-icon{font-size:22px;flex-shrink:0} html.pg-onlineshop-agentur .payment-name{font-size:14px;font-weight:700;color:var(--text-dark)} html.pg-onlineshop-agentur .payment-sub{font-size:11px;color:var(--text-muted)} html.pg-onlineshop-agentur .pay-marquee-fullwidth{overflow:hidden;background:var(--text-dark);padding:16px 0;} html.pg-onlineshop-agentur .pay-marquee-fullwidth-track{display:flex;gap:40px;animation:pay-marquee-full 28s linear infinite;white-space:nowrap;width:max-content;} html.pg-onlineshop-agentur .pay-mq-item{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;color:rgba(255,255,255,0.6);flex-shrink:0;} html.pg-onlineshop-agentur .pay-mq-dot{color:var(--lime);} @keyframes pay-marquee-full{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* Portfolio */ html.pg-onlineshop-agentur .portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:32px} html.pg-onlineshop-agentur .portfolio-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition)} html.pg-onlineshop-agentur .portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-onlineshop-agentur .portfolio-img{height:220px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center} html.pg-onlineshop-agentur .portfolio-img-inner{text-align:center;padding:24px} html.pg-onlineshop-agentur .pii-icon{font-size:40px;opacity:0.35;margin-bottom:8px} html.pg-onlineshop-agentur .pii-label{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-onlineshop-agentur .pii-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-onlineshop-agentur .portfolio-info{padding:20px 24px} html.pg-onlineshop-agentur .portfolio-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-onlineshop-agentur .portfolio-title{font-family:var(--font-head);font-size:19px;color:#fff;margin-bottom:4px} html.pg-onlineshop-agentur .portfolio-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px} html.pg-onlineshop-agentur .portfolio-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-onlineshop-agentur .metric-num{font-family:var(--font-head);font-size:20px;color:var(--lime)} html.pg-onlineshop-agentur .metric-label{font-size:11px;color:rgba(255,255,255,0.5)} html.pg-onlineshop-agentur .portfolio-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--transition)} html.pg-onlineshop-agentur .portfolio-link:hover{background:var(--purple)} /* FAQ */ html.pg-onlineshop-agentur .faq-section{background:var(--bg-lavender);padding:88px 0} html.pg-onlineshop-agentur .faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-onlineshop-agentur .faq-left{position:sticky;top:100px} html.pg-onlineshop-agentur .faq-right{display:flex;flex-direction:column;gap:4px} html.pg-onlineshop-agentur .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--transition)} html.pg-onlineshop-agentur .faq-item.open{border-color:var(--purple)} html.pg-onlineshop-agentur .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-onlineshop-agentur .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:var(--transition)} html.pg-onlineshop-agentur .faq-icon{position:relative;font-size:0!important} html.pg-onlineshop-agentur .faq-icon::before, html.pg-onlineshop-agentur .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-onlineshop-agentur .faq-icon::after{width:2px;height:9px} html.pg-onlineshop-agentur .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-onlineshop-agentur .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease} html.pg-onlineshop-agentur .faq-item.open .faq-answer{max-height:220px} html.pg-onlineshop-agentur .faq-answer-inner{padding:0 22px 18px;font-size:14px;color:var(--text-muted);line-height:1.75} /* CTA */ html.pg-onlineshop-agentur .cta-section{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-onlineshop-agentur .cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px} html.pg-onlineshop-agentur .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-onlineshop-agentur .cta-title{font-family:var(--font-head);font-size:clamp(28px,4vw,50px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-onlineshop-agentur .cta-sub{font-size:16px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:28px} html.pg-onlineshop-agentur .cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px} html.pg-onlineshop-agentur .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-onlineshop-agentur .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75)} html.pg-onlineshop-agentur .cta-check{color:var(--lime);font-weight:900} html.pg-onlineshop-agentur .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-onlineshop-agentur .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-onlineshop-agentur .form-group{margin-bottom:14px} html.pg-onlineshop-agentur .form-group input, html.pg-onlineshop-agentur .form-group textarea{width:100%;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--transition);outline:none} html.pg-onlineshop-agentur .form-group input::placeholder, html.pg-onlineshop-agentur .form-group textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-onlineshop-agentur .form-group input:focus, html.pg-onlineshop-agentur .form-group textarea:focus{border-color:var(--lime)} html.pg-onlineshop-agentur .form-group textarea{height:100px;resize:none} html.pg-onlineshop-agentur .form-dsgvo{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:16px} html.pg-onlineshop-agentur .form-dsgvo input{width:16px;height:16px;margin-top:2px;accent-color:var(--lime)} html.pg-onlineshop-agentur .form-dsgvo a{color:var(--lime);text-decoration:underline} html.pg-onlineshop-agentur .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:64px 0 32px} html.pg-onlineshop-agentur .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} html.pg-onlineshop-agentur .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:12px;display:flex;align-items:center;gap:4px} html.pg-onlineshop-agentur .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-onlineshop-agentur .footer-socials{display:flex;gap:8px} html.pg-onlineshop-agentur .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--transition);cursor:pointer} html.pg-onlineshop-agentur .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-onlineshop-agentur .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px} html.pg-onlineshop-agentur .footer-links{list-style:none;display:flex;flex-direction:column;gap:9px} html.pg-onlineshop-agentur .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--transition);font-weight:500} html.pg-onlineshop-agentur .footer-links a:hover{color:var(--purple)} html.pg-onlineshop-agentur .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-onlineshop-agentur .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-onlineshop-agentur .footer-legal{display:flex;gap:18px} html.pg-onlineshop-agentur .footer-legal a{font-size:13px;color:var(--text-muted)} html.pg-onlineshop-agentur .footer-legal a:hover{color:var(--purple)} html.pg-onlineshop-agentur .wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);cursor:pointer;transition:var(--transition)} html.pg-onlineshop-agentur .wa-float:hover{transform:scale(1.12)} html.pg-onlineshop-agentur .fade-up:nth-child(2){transition-delay:0.1s} html.pg-onlineshop-agentur .fade-up:nth-child(3){transition-delay:0.2s} html.pg-onlineshop-agentur .fade-up:nth-child(4){transition-delay:0.3s} @media(max-width:1024px){html.pg-onlineshop-agentur .cta-inner, html.pg-onlineshop-agentur .faq-layout{grid-template-columns:1fr}html.pg-onlineshop-agentur .features-grid{grid-template-columns:1fr 1fr}html.pg-onlineshop-agentur .payment-grid{grid-template-columns:1fr 1fr}html.pg-onlineshop-agentur .portfolio-grid{grid-template-columns:1fr}html.pg-onlineshop-agentur .footer-grid{grid-template-columns:1fr 1fr}html.pg-onlineshop-agentur .nav-links{display:none}html.pg-onlineshop-agentur .nav-menu-btn{display:flex}html.pg-onlineshop-agentur .nav-cta .btn-outline{display:none}html.pg-onlineshop-agentur .faq-left{position:static}} @media(max-width:640px){html.pg-onlineshop-agentur .container{padding:0 18px}html.pg-onlineshop-agentur .section{padding:60px 0}html.pg-onlineshop-agentur .page-hero{padding:110px 0 60px}html.pg-onlineshop-agentur .page-hero-actions{flex-direction:column}html.pg-onlineshop-agentur .page-hero-actions .btn{width:100%;justify-content:center}html.pg-onlineshop-agentur .features-grid{grid-template-columns:1fr}html.pg-onlineshop-agentur .payment-grid{grid-template-columns:1fr 1fr}html.pg-onlineshop-agentur .page-hero-stats{flex-direction:column}html.pg-onlineshop-agentur .hero-stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);padding:12px 0}html.pg-onlineshop-agentur .hero-stat-item:last-child{border-bottom:none}html.pg-onlineshop-agentur .footer-grid{grid-template-columns:1fr;gap:28px}html.pg-onlineshop-agentur .footer-bottom{flex-direction:column;text-align:center}html.pg-onlineshop-agentur .cta-actions{flex-direction:column}html.pg-onlineshop-agentur .cta-actions .btn{width:100%;justify-content:center}} @media(max-width:960px){html.pg-onlineshop-agentur [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;}} @media(max-width:640px){html.pg-onlineshop-agentur [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}} @media(max-width:960px){html.pg-onlineshop-agentur [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}} @media(max-width:640px){html.pg-onlineshop-agentur [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}} @media(max-width:860px){html.pg-onlineshop-agentur [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;gap:40px!important;}html.pg-onlineshop-agentur [style*="grid-template-columns:1fr 1fr"]>*{min-width:0;}} @media(max-width:640px){html.pg-onlineshop-agentur .pay-wrap{padding:18px!important;}html.pg-onlineshop-agentur .payment-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}html.pg-onlineshop-agentur .payment-card{padding:14px 12px;min-width:0;}html.pg-onlineshop-agentur .payment-card>div{min-width:0;}html.pg-onlineshop-agentur .payment-name, html.pg-onlineshop-agentur .payment-sub{overflow-wrap:anywhere;}} html.pg-onlineshop-agentur .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-onlineshop-agentur .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--transition)} html.pg-onlineshop-agentur .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-onlineshop-agentur .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-onlineshop-agentur .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-onlineshop-agentur .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-onlineshop-agentur .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-onlineshop-agentur .author-role{font-size:12px;color:var(--text-muted)} html.pg-onlineshop-agentur .region-card{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--transition)} html.pg-onlineshop-agentur .region-card:hover{background:rgba(255,255,255,0.18);border-color:var(--lime);transform:translateX(4px)} html.pg-onlineshop-agentur .region-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-onlineshop-agentur .region-name{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:1px} html.pg-onlineshop-agentur .region-sub{font-size:11px;color:rgba(255,255,255,0.55)} html.pg-onlineshop-agentur .region-arrow{margin-left:auto;color:rgba(255,255,255,0.4);transition:var(--transition);font-size:13px} html.pg-onlineshop-agentur .region-card:hover .region-arrow{color:var(--lime)} /* ==================================================================== PAGE: portfolio-automotive-webdesign.html (scoped under html.pg-portfolio-automotive-webdesign) ==================================================================== */ /* ============================================================ e-wola SHARED DESIGN SYSTEM v1.0 Sociell-inspired · Light theme · Purple + Lime Fonts: Dela Gothic One (headings) + Plus Jakarta Sans (body) ============================================================ */ /* SECURITY: Content Security Policy added in each page head */ html.pg-portfolio-automotive-webdesign{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* BUTTONS */ html.pg-portfolio-automotive-webdesign .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;letter-spacing:-0.01em;line-height:1} html.pg-portfolio-automotive-webdesign .btn-lg{padding:18px 40px;font-size:16px} /* BADGE */ html.pg-portfolio-automotive-webdesign .badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(123,107,230,0.25);border-radius:var(--radius-pill);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(123,107,230,0.08);color:var(--purple)} /* ILLUS PLACEHOLDER */ html.pg-portfolio-automotive-webdesign .illus{background:rgba(123,107,230,0.06);border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} html.pg-portfolio-automotive-webdesign .illus-icon{font-size:52px;opacity:0.35} html.pg-portfolio-automotive-webdesign .illus-lbl{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-portfolio-automotive-webdesign .illus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* NAV */ html.pg-portfolio-automotive-webdesign .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background var(--t),box-shadow var(--t)} html.pg-portfolio-automotive-webdesign .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-portfolio-automotive-webdesign .nav:has(~ .mnav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-portfolio-automotive-webdesign .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-portfolio-automotive-webdesign .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px;letter-spacing:-0.5px} html.pg-portfolio-automotive-webdesign .nav-logo-dot{color:var(--purple)} html.pg-portfolio-automotive-webdesign .nav-links{display:flex;align-items:center;gap:2px} html.pg-portfolio-automotive-webdesign .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--t)} html.pg-portfolio-automotive-webdesign .nav-links a:hover, html.pg-portfolio-automotive-webdesign .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-links a:hover, html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-portfolio-automotive-webdesign .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-portfolio-automotive-webdesign .nav-drop{position:relative} html.pg-portfolio-automotive-webdesign .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} html.pg-portfolio-automotive-webdesign .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow-md);pointer-events:none} html.pg-portfolio-automotive-webdesign .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} html.pg-portfolio-automotive-webdesign .nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500;transition:var(--t)} html.pg-portfolio-automotive-webdesign .nav-drop-menu a:hover{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-portfolio-automotive-webdesign .nav-drop-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-portfolio-automotive-webdesign .nav-cta{display:flex;align-items:center;gap:10px} html.pg-portfolio-automotive-webdesign .nav-hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--text-dark);font-size:18px;line-height:1} /* MOBILE NAV */ html.pg-portfolio-automotive-webdesign .mnav{display:none;position:fixed;inset:0;z-index:99;background:#fff;flex-direction:column;padding:90px 28px 40px;overflow-y:auto;gap:0} html.pg-portfolio-automotive-webdesign .mnav.open{display:flex} html.pg-portfolio-automotive-webdesign .mnav-link{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:15px 0;border-bottom:1px solid var(--border);display:block;transition:var(--t)} html.pg-portfolio-automotive-webdesign .mnav-link:hover, html.pg-portfolio-automotive-webdesign .mnav-link.active{color:var(--purple)} html.pg-portfolio-automotive-webdesign .mnav-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} /* BREADCRUMB */ html.pg-portfolio-automotive-webdesign .bc{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-portfolio-automotive-webdesign .bc a{color:rgba(255,255,255,0.6);transition:var(--t)} html.pg-portfolio-automotive-webdesign .bc a:hover{color:#fff} html.pg-portfolio-automotive-webdesign .bc-sep{color:rgba(255,255,255,0.3)} /* PAGE HERO (inner pages) */ html.pg-portfolio-automotive-webdesign .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-portfolio-automotive-webdesign .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-portfolio-automotive-webdesign .page-hero-wrap{position:relative;z-index:1;max-width:760px} html.pg-portfolio-automotive-webdesign .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-portfolio-automotive-webdesign .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-portfolio-automotive-webdesign .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} html.pg-portfolio-automotive-webdesign .hero-stats{display:flex;flex-wrap:wrap;gap:0} html.pg-portfolio-automotive-webdesign .hs-item{padding:18px 28px;border-right:1px solid rgba(255,255,255,0.15)} html.pg-portfolio-automotive-webdesign .hs-item:first-child{padding-left:0} html.pg-portfolio-automotive-webdesign .hs-item:last-child{border-right:none} html.pg-portfolio-automotive-webdesign .hs-num{font-family:var(--font-head);font-size:clamp(26px,3.5vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-portfolio-automotive-webdesign .hs-lbl{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* SECTION HEADER */ html.pg-portfolio-automotive-webdesign .sec-hd{margin-bottom:56px} html.pg-portfolio-automotive-webdesign .sec-hd-c{text-align:center;margin-bottom:56px} html.pg-portfolio-automotive-webdesign .sec-hd .badge, html.pg-portfolio-automotive-webdesign .sec-hd-c .badge{margin-bottom:16px} /* PROCESS STEPS */ html.pg-portfolio-automotive-webdesign .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-portfolio-automotive-webdesign .steps::after{content:'';position:absolute;top:31px;left:8%;right:8%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-portfolio-automotive-webdesign .step{text-align:center;padding:0 10px;position:relative;z-index:1} html.pg-portfolio-automotive-webdesign .step-circle{width:62px;height:62px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;margin:0 auto 16px;transition:var(--t)} html.pg-portfolio-automotive-webdesign .step:hover .step-circle{background:var(--purple);transform:scale(1.08)} html.pg-portfolio-automotive-webdesign .step-title{font-family:var(--font-head);font-size:13px;color:var(--text-dark);margin-bottom:6px} html.pg-portfolio-automotive-webdesign .step-desc{font-size:12px;color:var(--text-body);line-height:1.55} /* PORTFOLIO CARD */ html.pg-portfolio-automotive-webdesign .port-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column} html.pg-portfolio-automotive-webdesign .port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-portfolio-automotive-webdesign .port-img{min-height:200px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0} html.pg-portfolio-automotive-webdesign .port-img-inner{text-align:center;padding:24px} html.pg-portfolio-automotive-webdesign .pi-icon{font-size:38px;opacity:0.32;margin-bottom:8px} html.pg-portfolio-automotive-webdesign .pi-lbl{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-portfolio-automotive-webdesign .pi-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-portfolio-automotive-webdesign .port-info{padding:20px 24px;flex:1;display:flex;flex-direction:column} html.pg-portfolio-automotive-webdesign .port-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-portfolio-automotive-webdesign .port-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:4px} html.pg-portfolio-automotive-webdesign .port-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px;flex:1} html.pg-portfolio-automotive-webdesign .port-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-portfolio-automotive-webdesign .pm-num{font-family:var(--font-head);font-size:18px;color:var(--lime)} html.pg-portfolio-automotive-webdesign .pm-lbl{font-size:11px;color:rgba(255,255,255,0.45)} html.pg-portfolio-automotive-webdesign .port-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--t)} html.pg-portfolio-automotive-webdesign .port-link:hover{background:var(--purple)} /* TESTIMONIAL CARD */ html.pg-portfolio-automotive-webdesign .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--t)} html.pg-portfolio-automotive-webdesign .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-portfolio-automotive-webdesign .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-portfolio-automotive-webdesign .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-portfolio-automotive-webdesign .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-portfolio-automotive-webdesign .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-portfolio-automotive-webdesign .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-portfolio-automotive-webdesign .author-role{font-size:12px;color:var(--text-muted)} /* FAQ */ html.pg-portfolio-automotive-webdesign .faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-portfolio-automotive-webdesign .faq-sticky{position:sticky;top:100px} html.pg-portfolio-automotive-webdesign .faq-list{display:flex;flex-direction:column;gap:4px} html.pg-portfolio-automotive-webdesign .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--t)} html.pg-portfolio-automotive-webdesign .faq-item.open{border-color:var(--purple)} html.pg-portfolio-automotive-webdesign .faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-portfolio-automotive-webdesign .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:transform var(--t),background var(--t)} html.pg-portfolio-automotive-webdesign .faq-icon{position:relative;font-size:0!important} html.pg-portfolio-automotive-webdesign .faq-icon::before, html.pg-portfolio-automotive-webdesign .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-portfolio-automotive-webdesign .faq-icon::after{width:2px;height:9px} html.pg-portfolio-automotive-webdesign .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-portfolio-automotive-webdesign .faq-ans{max-height:0;overflow:hidden;transition:max-height 0.32s ease} html.pg-portfolio-automotive-webdesign .faq-item.open .faq-ans{max-height:250px} html.pg-portfolio-automotive-webdesign .faq-ans-inner{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.75} /* REGION CARD */ html.pg-portfolio-automotive-webdesign .region-card{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--t)} html.pg-portfolio-automotive-webdesign .region-card:hover{background:rgba(255,255,255,0.18);border-color:var(--lime);transform:translateX(4px)} html.pg-portfolio-automotive-webdesign .region-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-portfolio-automotive-webdesign .region-name{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:1px} html.pg-portfolio-automotive-webdesign .region-sub{font-size:11px;color:rgba(255,255,255,0.55)} html.pg-portfolio-automotive-webdesign .region-arrow{margin-left:auto;color:rgba(255,255,255,0.4);transition:var(--t);font-size:13px} html.pg-portfolio-automotive-webdesign .region-card:hover .region-arrow{color:var(--lime)} /* WHY ITEM */ html.pg-portfolio-automotive-webdesign .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--t)} html.pg-portfolio-automotive-webdesign .why-item:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translateX(4px)} html.pg-portfolio-automotive-webdesign .why-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-portfolio-automotive-webdesign .why-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-portfolio-automotive-webdesign .why-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* CTA SECTION */ html.pg-portfolio-automotive-webdesign .cta-sec{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-portfolio-automotive-webdesign .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-portfolio-automotive-webdesign .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-portfolio-automotive-webdesign .cta-h{font-family:var(--font-head);font-size:clamp(28px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-portfolio-automotive-webdesign .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-portfolio-automotive-webdesign .cta-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-portfolio-automotive-webdesign .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-portfolio-automotive-webdesign .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-portfolio-automotive-webdesign .cta-tick{color:var(--lime);font-weight:900} /* CTA FORM */ html.pg-portfolio-automotive-webdesign .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-portfolio-automotive-webdesign .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-portfolio-automotive-webdesign .fg{margin-bottom:14px} html.pg-portfolio-automotive-webdesign .fg input, html.pg-portfolio-automotive-webdesign .fg textarea, html.pg-portfolio-automotive-webdesign .fg select{width:100%;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--t);outline:none;-webkit-appearance:none;appearance:none} html.pg-portfolio-automotive-webdesign .fg input::placeholder, html.pg-portfolio-automotive-webdesign .fg textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-portfolio-automotive-webdesign .fg input:focus, html.pg-portfolio-automotive-webdesign .fg textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-portfolio-automotive-webdesign .fg textarea{height:96px;resize:vertical} html.pg-portfolio-automotive-webdesign .form-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.5} html.pg-portfolio-automotive-webdesign .form-check input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime);cursor:pointer} html.pg-portfolio-automotive-webdesign .form-check a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-portfolio-automotive-webdesign .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:72px 0 32px} html.pg-portfolio-automotive-webdesign .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} html.pg-portfolio-automotive-webdesign .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:4px} html.pg-portfolio-automotive-webdesign .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-portfolio-automotive-webdesign .footer-contact a{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:5px;transition:var(--t)} html.pg-portfolio-automotive-webdesign .footer-contact a:hover{color:var(--purple)} html.pg-portfolio-automotive-webdesign .footer-socials{display:flex;gap:8px;margin-top:18px} html.pg-portfolio-automotive-webdesign .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--t);cursor:pointer} html.pg-portfolio-automotive-webdesign .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-portfolio-automotive-webdesign .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px;letter-spacing:-0.2px} html.pg-portfolio-automotive-webdesign .footer-links{display:flex;flex-direction:column;gap:9px} html.pg-portfolio-automotive-webdesign .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--t);font-weight:500} html.pg-portfolio-automotive-webdesign .footer-links a:hover{color:var(--purple)} html.pg-portfolio-automotive-webdesign .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-portfolio-automotive-webdesign .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-portfolio-automotive-webdesign .footer-legal{display:flex;gap:18px} html.pg-portfolio-automotive-webdesign .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--t)} html.pg-portfolio-automotive-webdesign .footer-legal a:hover{color:var(--purple)} /* WHATSAPP FLOAT */ html.pg-portfolio-automotive-webdesign .wa-btn{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);transition:var(--t);text-decoration:none;border:none;cursor:pointer} html.pg-portfolio-automotive-webdesign .wa-btn:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5)} html.pg-portfolio-automotive-webdesign .fade-up:nth-child(1){transition-delay:0s} html.pg-portfolio-automotive-webdesign .fade-up:nth-child(2){transition-delay:0.08s} html.pg-portfolio-automotive-webdesign .fade-up:nth-child(3){transition-delay:0.16s} html.pg-portfolio-automotive-webdesign .fade-up:nth-child(4){transition-delay:0.24s} html.pg-portfolio-automotive-webdesign .fade-up:nth-child(5){transition-delay:0.32s} /* MARQUEE */ html.pg-portfolio-automotive-webdesign .marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} html.pg-portfolio-automotive-webdesign .marquee-track{display:flex;gap:0;animation:mq-pg-portfolio-automotive-webdesign 24s linear infinite;white-space:nowrap;width:max-content} html.pg-portfolio-automotive-webdesign .marquee-track:hover{animation-play-state:paused} html.pg-portfolio-automotive-webdesign .mq-pg-portfolio-automotive-webdesign-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;padding:0 24px;color:var(--text-light);opacity:0.55;transition:var(--t);flex-shrink:0} html.pg-portfolio-automotive-webdesign .mq-pg-portfolio-automotive-webdesign-item:hover{opacity:1;color:var(--purple)} html.pg-portfolio-automotive-webdesign .mq-pg-portfolio-automotive-webdesign-sep{color:var(--purple);font-size:12px;opacity:0.3;flex-shrink:0} @keyframes mq-pg-portfolio-automotive-webdesign{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SKIP LINK */ html.pg-portfolio-automotive-webdesign .skip-link{position:absolute;top:-60px;left:16px;background:var(--purple);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;z-index:999;transition:top 0.2s} html.pg-portfolio-automotive-webdesign .skip-link:focus{top:16px} /* RESPONSIVE SYSTEM */ @media(max-width:1100px){ html.pg-portfolio-automotive-webdesign .grid-2{gap:48px} html.pg-portfolio-automotive-webdesign .cta-inner{gap:48px} html.pg-portfolio-automotive-webdesign .faq-wrap{gap:48px} html.pg-portfolio-automotive-webdesign .footer-grid{grid-template-columns:1fr 1fr;gap:40px} } @media(max-width:960px){ html.pg-portfolio-automotive-webdesign .nav-links, html.pg-portfolio-automotive-webdesign .nav-cta .btn-outline{display:none} html.pg-portfolio-automotive-webdesign .nav-hamburger{display:flex;align-items:center;justify-content:center} html.pg-portfolio-automotive-webdesign .grid-2, html.pg-portfolio-automotive-webdesign .cta-inner, html.pg-portfolio-automotive-webdesign .faq-wrap{grid-template-columns:1fr} html.pg-portfolio-automotive-webdesign .faq-sticky{position:static} html.pg-portfolio-automotive-webdesign .steps{grid-template-columns:1fr 1fr;gap:24px} html.pg-portfolio-automotive-webdesign .steps::after{display:none} html.pg-portfolio-automotive-webdesign .grid-3{grid-template-columns:1fr 1fr} html.pg-portfolio-automotive-webdesign .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:640px){ html.pg-portfolio-automotive-webdesign .container{padding:0 18px} html.pg-portfolio-automotive-webdesign .s{padding:60px 0} html.pg-portfolio-automotive-webdesign .s-sm{padding:48px 0} html.pg-portfolio-automotive-webdesign .s-lg{padding:72px 0} html.pg-portfolio-automotive-webdesign .page-hero{padding:106px 0 56px} html.pg-portfolio-automotive-webdesign .page-hero-actions, html.pg-portfolio-automotive-webdesign .cta-acts, html.pg-portfolio-automotive-webdesign .mnav-cta{flex-direction:column} html.pg-portfolio-automotive-webdesign .page-hero-actions .btn, html.pg-portfolio-automotive-webdesign .cta-acts .btn, html.pg-portfolio-automotive-webdesign .mnav-cta .btn{width:100%;justify-content:center} html.pg-portfolio-automotive-webdesign .hero-stats{flex-direction:column} html.pg-portfolio-automotive-webdesign .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:12px 0} html.pg-portfolio-automotive-webdesign .hs-item:last-child{border-bottom:none} html.pg-portfolio-automotive-webdesign .grid-3, html.pg-portfolio-automotive-webdesign .grid-4{grid-template-columns:1fr} html.pg-portfolio-automotive-webdesign .steps{grid-template-columns:1fr} html.pg-portfolio-automotive-webdesign .steps::after{display:none} html.pg-portfolio-automotive-webdesign .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-portfolio-automotive-webdesign .footer-bottom{flex-direction:column;text-align:center} html.pg-portfolio-automotive-webdesign .sec-hd, html.pg-portfolio-automotive-webdesign .sec-hd-c{margin-bottom:40px} } /* ==================================================================== PAGE: portfolio.html (scoped under html.pg-portfolio) ==================================================================== */ /* ============================================================ e-wola SHARED DESIGN SYSTEM v1.0 Sociell-inspired · Light theme · Purple + Lime Fonts: Dela Gothic One (headings) + Plus Jakarta Sans (body) ============================================================ */ /* SECURITY: Content Security Policy added in each page head */ html.pg-portfolio{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* BUTTONS */ html.pg-portfolio .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;letter-spacing:-0.01em;line-height:1} html.pg-portfolio .btn-outline{border:1px solid var(--text-dark);} html.pg-portfolio .btn-outline:hover{background:var(--text-dark);color:#fff;} html.pg-portfolio .btn-lg{padding:18px 40px;font-size:16px} /* BADGE */ html.pg-portfolio .badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(123,107,230,0.25);border-radius:var(--radius-pill);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(123,107,230,0.08);color:var(--purple)} /* ILLUS PLACEHOLDER */ html.pg-portfolio .illus{background:rgba(123,107,230,0.06);border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} html.pg-portfolio .illus-icon{font-size:52px;opacity:0.35} html.pg-portfolio .illus-lbl{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-portfolio .illus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* NAV */ html.pg-portfolio .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background var(--t),box-shadow var(--t)} html.pg-portfolio .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-portfolio .nav:has(~ .mnav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-portfolio .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-portfolio .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px;letter-spacing:-0.5px} html.pg-portfolio .nav-logo-dot{color:var(--purple)} html.pg-portfolio .nav-links{display:flex;align-items:center;gap:2px} html.pg-portfolio .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--t)} html.pg-portfolio .nav-links a:hover, html.pg-portfolio .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-portfolio .nav:not(.scrolled) .nav-links a:hover, html.pg-portfolio .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-portfolio .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-portfolio .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-portfolio .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-portfolio .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-portfolio .nav-drop{position:relative} html.pg-portfolio .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} html.pg-portfolio .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow-md);pointer-events:none} html.pg-portfolio .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} html.pg-portfolio .nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500;transition:var(--t)} html.pg-portfolio .nav-drop-menu a:hover{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-portfolio .nav-drop-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-portfolio .nav-cta{display:flex;align-items:center;gap:10px} html.pg-portfolio .nav-hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--text-dark);font-size:18px;line-height:1} /* MOBILE NAV */ html.pg-portfolio .mnav{display:none;position:fixed;inset:0;z-index:99;background:#fff;flex-direction:column;padding:90px 28px 40px;overflow-y:auto;gap:0} html.pg-portfolio .mnav.open{display:flex} html.pg-portfolio .mnav-link{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:15px 0;border-bottom:1px solid var(--border);display:block;transition:var(--t)} html.pg-portfolio .mnav-link:hover, html.pg-portfolio .mnav-link.active{color:var(--purple)} html.pg-portfolio .mnav-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} /* BREADCRUMB */ html.pg-portfolio .bc{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-portfolio .bc a{color:rgba(255,255,255,0.6);transition:var(--t)} html.pg-portfolio .bc a:hover{color:#fff} html.pg-portfolio .bc-sep{color:rgba(255,255,255,0.3)} /* PAGE HERO (inner pages) */ html.pg-portfolio .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-portfolio .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-portfolio .page-hero-wrap{position:relative;z-index:1;max-width:760px} html.pg-portfolio .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-portfolio .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-portfolio .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} html.pg-portfolio .hero-stats{display:flex;flex-wrap:wrap;gap:0} html.pg-portfolio .hs-item{padding:18px 28px;border-right:1px solid rgba(255,255,255,0.15)} html.pg-portfolio .hs-item:first-child{padding-left:0} html.pg-portfolio .hs-item:last-child{border-right:none} html.pg-portfolio .hs-num{font-family:var(--font-head);font-size:clamp(26px,3.5vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-portfolio .hs-lbl{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* SECTION HEADER */ html.pg-portfolio .sec-hd{margin-bottom:56px} html.pg-portfolio .sec-hd-c{text-align:center;margin-bottom:56px} html.pg-portfolio .sec-hd .badge, html.pg-portfolio .sec-hd-c .badge{margin-bottom:16px} /* PROCESS STEPS */ html.pg-portfolio .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-portfolio .steps::after{content:'';position:absolute;top:31px;left:8%;right:8%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-portfolio .step{text-align:center;padding:0 10px;position:relative;z-index:1} html.pg-portfolio .step-circle{width:62px;height:62px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;margin:0 auto 16px;transition:var(--t)} html.pg-portfolio .step:hover .step-circle{background:var(--purple);transform:scale(1.08)} html.pg-portfolio .step-title{font-family:var(--font-head);font-size:13px;color:var(--text-dark);margin-bottom:6px} html.pg-portfolio .step-desc{font-size:12px;color:var(--text-body);line-height:1.55} /* PORTFOLIO CARD */ html.pg-portfolio .port-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column;border:1.5px solid var(--border);box-shadow:var(--shadow-sm)} html.pg-portfolio .port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-portfolio .port-img{height:400px;background:#f5f4ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden} html.pg-portfolio .port-img img{object-fit:cover;width:100%;height:100%;} html.pg-portfolio .port-img-inner{text-align:center;padding:24px} html.pg-portfolio .pi-icon{font-size:38px;opacity:0.32;margin-bottom:8px} html.pg-portfolio .pi-lbl{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-portfolio .pi-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-portfolio .port-info{padding:20px 24px;flex:1;display:flex;flex-direction:column} html.pg-portfolio .port-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-portfolio .port-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:4px} html.pg-portfolio .port-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px;flex:1} html.pg-portfolio .port-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-portfolio .pm-num{font-family:var(--font-head);font-size:18px;color:var(--lime)} html.pg-portfolio .pm-lbl{font-size:11px;color:rgba(255,255,255,0.45)} html.pg-portfolio .port-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--t)} html.pg-portfolio .port-link:hover{background:var(--purple)} /* TESTIMONIAL CARD */ html.pg-portfolio .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--t)} html.pg-portfolio .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-portfolio .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-portfolio .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-portfolio .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-portfolio .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-portfolio .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-portfolio .author-role{font-size:12px;color:var(--text-muted)} /* FAQ */ html.pg-portfolio .faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-portfolio .faq-sticky{position:sticky;top:100px} html.pg-portfolio .faq-list{display:flex;flex-direction:column;gap:4px} html.pg-portfolio .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--t)} html.pg-portfolio .faq-item.open{border-color:var(--purple)} html.pg-portfolio .faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-portfolio .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:transform var(--t),background var(--t)} html.pg-portfolio .faq-icon{position:relative;font-size:0!important} html.pg-portfolio .faq-icon::before, html.pg-portfolio .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-portfolio .faq-icon::after{width:2px;height:9px} html.pg-portfolio .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-portfolio .faq-ans{max-height:0;overflow:hidden;transition:max-height 0.32s ease} html.pg-portfolio .faq-item.open .faq-ans{max-height:250px} html.pg-portfolio .faq-ans-inner{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.75} /* REGION CARD */ html.pg-portfolio .region-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--t);min-width:0} html.pg-portfolio .region-card>div{min-width:0} html.pg-portfolio .region-card:hover{background:var(--bg-card);border-color:var(--purple);transform:translateX(4px)} html.pg-portfolio .region-icon{width:36px;height:36px;border-radius:9px;background:var(--bg-lavender);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-portfolio .region-name{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:1px} html.pg-portfolio .region-sub{font-size:11px;color:var(--text-muted)} html.pg-portfolio .region-arrow{margin-left:auto;color:var(--text-muted);transition:var(--t);font-size:13px} html.pg-portfolio .region-card:hover .region-arrow{color:var(--purple)} /* WHY ITEM */ html.pg-portfolio .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--t)} html.pg-portfolio .why-item:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translateX(4px)} html.pg-portfolio .why-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-portfolio .why-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-portfolio .why-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* CTA SECTION */ html.pg-portfolio .cta-sec{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-portfolio .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-portfolio .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-portfolio .cta-h{font-family:var(--font-head);font-size:clamp(28px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-portfolio .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-portfolio .cta-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-portfolio .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-portfolio .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-portfolio .cta-tick{color:var(--lime);font-weight:900} /* CTA FORM */ html.pg-portfolio .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-portfolio .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-portfolio .fg{margin-bottom:14px} html.pg-portfolio .fg input, html.pg-portfolio .fg textarea, html.pg-portfolio .fg select{width:100%;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--t);outline:none;-webkit-appearance:none;appearance:none} html.pg-portfolio .fg input::placeholder, html.pg-portfolio .fg textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-portfolio .fg input:focus, html.pg-portfolio .fg textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-portfolio .fg textarea{height:96px;resize:vertical} html.pg-portfolio .form-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.5} html.pg-portfolio .form-check input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime);cursor:pointer} html.pg-portfolio .form-check a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-portfolio .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:72px 0 32px} html.pg-portfolio .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} html.pg-portfolio .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:4px} html.pg-portfolio .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-portfolio .footer-contact a{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:5px;transition:var(--t)} html.pg-portfolio .footer-contact a:hover{color:var(--purple)} html.pg-portfolio .footer-socials{display:flex;gap:8px;margin-top:18px} html.pg-portfolio .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--t);cursor:pointer} html.pg-portfolio .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-portfolio .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px;letter-spacing:-0.2px} html.pg-portfolio .footer-links{display:flex;flex-direction:column;gap:9px} html.pg-portfolio .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--t);font-weight:500} html.pg-portfolio .footer-links a:hover{color:var(--purple)} html.pg-portfolio .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-portfolio .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-portfolio .footer-legal{display:flex;gap:18px} html.pg-portfolio .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--t)} html.pg-portfolio .footer-legal a:hover{color:var(--purple)} /* WHATSAPP FLOAT */ html.pg-portfolio .wa-btn{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);transition:var(--t);text-decoration:none;border:none;cursor:pointer} html.pg-portfolio .wa-btn:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5)} html.pg-portfolio .fade-up:nth-child(1){transition-delay:0s} html.pg-portfolio .fade-up:nth-child(2){transition-delay:0.08s} html.pg-portfolio .fade-up:nth-child(3){transition-delay:0.16s} html.pg-portfolio .fade-up:nth-child(4){transition-delay:0.24s} html.pg-portfolio .fade-up:nth-child(5){transition-delay:0.32s} /* MARQUEE */ html.pg-portfolio .marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} html.pg-portfolio .marquee-track{display:flex;gap:0;animation:mq-pg-portfolio 24s linear infinite;white-space:nowrap;width:max-content} html.pg-portfolio .marquee-track:hover{animation-play-state:paused} html.pg-portfolio .mq-pg-portfolio-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;padding:0 24px;color:var(--text-light);opacity:0.55;transition:var(--t);flex-shrink:0} html.pg-portfolio .mq-pg-portfolio-item:hover{opacity:1;color:var(--purple)} html.pg-portfolio .mq-pg-portfolio-sep{color:var(--purple);font-size:12px;opacity:0.3;flex-shrink:0} @keyframes mq-pg-portfolio{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SKIP LINK */ html.pg-portfolio .skip-link{position:absolute;top:-60px;left:16px;background:var(--purple);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;z-index:999;transition:top 0.2s} html.pg-portfolio .skip-link:focus{top:16px} /* RESPONSIVE SYSTEM */ @media(max-width:1100px){ html.pg-portfolio .grid-2{gap:48px} html.pg-portfolio .cta-inner{gap:48px} html.pg-portfolio .faq-wrap{gap:48px} html.pg-portfolio .footer-grid{grid-template-columns:1fr 1fr;gap:40px} } @media(max-width:960px){ html.pg-portfolio .nav-links, html.pg-portfolio .nav-cta .btn-outline{display:none} html.pg-portfolio .nav-hamburger{display:flex;align-items:center;justify-content:center} html.pg-portfolio .grid-2, html.pg-portfolio .cta-inner, html.pg-portfolio .faq-wrap{grid-template-columns:1fr} html.pg-portfolio .faq-sticky{position:static} html.pg-portfolio .steps{grid-template-columns:1fr 1fr;gap:24px} html.pg-portfolio .steps::after{display:none} html.pg-portfolio .grid-3{grid-template-columns:1fr 1fr} html.pg-portfolio .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:640px){ html.pg-portfolio .container{padding:0 18px} html.pg-portfolio .s{padding:60px 0} html.pg-portfolio .s-sm{padding:48px 0} html.pg-portfolio .s-lg{padding:72px 0} html.pg-portfolio .page-hero{padding:106px 0 56px} html.pg-portfolio .page-hero-actions, html.pg-portfolio .cta-acts, html.pg-portfolio .mnav-cta{flex-direction:column} html.pg-portfolio .page-hero-actions .btn, html.pg-portfolio .cta-acts .btn, html.pg-portfolio .mnav-cta .btn{width:100%;justify-content:center} html.pg-portfolio .hero-stats{flex-direction:column} html.pg-portfolio .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:12px 0;text-align:center} html.pg-portfolio .hs-item:last-child{border-bottom:none} html.pg-portfolio .grid-3, html.pg-portfolio .grid-4{grid-template-columns:1fr} html.pg-portfolio .steps{grid-template-columns:1fr} html.pg-portfolio .steps::after{display:none} html.pg-portfolio .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-portfolio .footer-bottom{flex-direction:column;text-align:center} html.pg-portfolio .sec-hd, html.pg-portfolio .sec-hd-c{margin-bottom:40px} } html.pg-portfolio .filter-btn.active{background:var(--text-dark);color:#fff;border-color:var(--text-dark);} @media(max-width:960px){html.pg-portfolio .s > .container > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important;}} @media(max-width:640px){html.pg-portfolio .s > .container > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important;}} @media(max-width:860px){html.pg-portfolio div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}} /* ==================================================================== PAGE: ueber-uns.html (scoped under html.pg-ueber-uns) ==================================================================== */ /* ============================================================ e-wola SHARED DESIGN SYSTEM v1.0 Sociell-inspired · Light theme · Purple + Lime Fonts: Dela Gothic One (headings) + Plus Jakarta Sans (body) ============================================================ */ /* SECURITY: Content Security Policy added in each page head */ html.pg-ueber-uns{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --border-strong: rgba(123,107,230,0.3); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --t: 0.25s cubic-bezier(0.4,0,0.2,1); } /* BUTTONS */ html.pg-ueber-uns .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--t);white-space:nowrap;text-decoration:none;letter-spacing:-0.01em;line-height:1} html.pg-ueber-uns .btn-white{background:#fff;color:var(--text-dark);padding:16px 32px;} html.pg-ueber-uns .btn-lg{padding:18px 40px;font-size:16px} /* BADGE */ html.pg-ueber-uns .badge{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(123,107,230,0.25);border-radius:var(--radius-pill);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(123,107,230,0.08);color:var(--purple)} /* ILLUS PLACEHOLDER */ html.pg-ueber-uns .illus{background:rgba(123,107,230,0.06);border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} html.pg-ueber-uns .illus-icon{font-size:52px;opacity:0.35} html.pg-ueber-uns .illus-lbl{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-ueber-uns .illus-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* NAV */ html.pg-ueber-uns .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background var(--t),box-shadow var(--t)} html.pg-ueber-uns .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-ueber-uns .nav:has(~ .mnav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-ueber-uns .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-ueber-uns .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px;letter-spacing:-0.5px} html.pg-ueber-uns .nav-logo-dot{color:var(--purple)} html.pg-ueber-uns .nav-links{display:flex;align-items:center;gap:2px} html.pg-ueber-uns .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--t)} html.pg-ueber-uns .nav-links a:hover, html.pg-ueber-uns .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-ueber-uns .nav:not(.scrolled) .nav-links a:hover, html.pg-ueber-uns .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-ueber-uns .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-ueber-uns .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-ueber-uns .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-ueber-uns .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-ueber-uns .nav-drop{position:relative} html.pg-ueber-uns .nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} html.pg-ueber-uns .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:240px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:var(--shadow-md);pointer-events:none} html.pg-ueber-uns .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto} html.pg-ueber-uns .nav-drop-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500;transition:var(--t)} html.pg-ueber-uns .nav-drop-menu a:hover{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-ueber-uns .nav-drop-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-ueber-uns .nav-cta{display:flex;align-items:center;gap:10px} html.pg-ueber-uns .nav-hamburger{display:none;background:none;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--text-dark);font-size:18px;line-height:1} /* MOBILE NAV */ html.pg-ueber-uns .mnav{display:none;position:fixed;inset:0;z-index:99;background:#fff;flex-direction:column;padding:90px 28px 40px;overflow-y:auto;gap:0} html.pg-ueber-uns .mnav.open{display:flex} html.pg-ueber-uns .mnav-link{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:15px 0;border-bottom:1px solid var(--border);display:block;transition:var(--t)} html.pg-ueber-uns .mnav-link:hover, html.pg-ueber-uns .mnav-link.active{color:var(--purple)} html.pg-ueber-uns .mnav-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px} /* BREADCRUMB */ html.pg-ueber-uns .bc{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-ueber-uns .bc a{color:rgba(255,255,255,0.6);transition:var(--t)} html.pg-ueber-uns .bc a:hover{color:#fff} html.pg-ueber-uns .bc-sep{color:rgba(255,255,255,0.3)} /* PAGE HERO (inner pages) */ html.pg-ueber-uns .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-ueber-uns .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-ueber-uns .page-hero-wrap{position:relative;z-index:1;max-width:760px} html.pg-ueber-uns .page-hero-h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-ueber-uns .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-ueber-uns .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} html.pg-ueber-uns .hero-stats{display:flex;flex-wrap:wrap;gap:0} html.pg-ueber-uns .hs-item{padding:18px 28px;border-right:1px solid rgba(255,255,255,0.15)} html.pg-ueber-uns .hs-item:first-child{padding-left:0} html.pg-ueber-uns .hs-item:last-child{border-right:none} html.pg-ueber-uns .hs-num{font-family:var(--font-head);font-size:clamp(26px,3.5vw,42px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-ueber-uns .hs-lbl{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* SECTION HEADER */ html.pg-ueber-uns .sec-hd{margin-bottom:56px} html.pg-ueber-uns .sec-hd-c{text-align:center;margin-bottom:56px} html.pg-ueber-uns .sec-hd .badge, html.pg-ueber-uns .sec-hd-c .badge{margin-bottom:16px} /* PROCESS STEPS */ html.pg-ueber-uns .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-ueber-uns .steps::after{content:'';position:absolute;top:31px;left:8%;right:8%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-ueber-uns .step{text-align:center;padding:0 10px;position:relative;z-index:1} html.pg-ueber-uns .step-circle{width:62px;height:62px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;margin:0 auto 16px;transition:var(--t)} html.pg-ueber-uns .step:hover .step-circle{background:var(--purple);transform:scale(1.08)} html.pg-ueber-uns .step-title{font-family:var(--font-head);font-size:13px;color:var(--text-dark);margin-bottom:6px} html.pg-ueber-uns .step-desc{font-size:12px;color:var(--text-body);line-height:1.55} /* PORTFOLIO CARD */ html.pg-ueber-uns .port-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--t);display:flex;flex-direction:column} html.pg-ueber-uns .port-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-ueber-uns .port-img{min-height:200px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0} html.pg-ueber-uns .port-img-inner{text-align:center;padding:24px} html.pg-ueber-uns .pi-icon{font-size:38px;opacity:0.32;margin-bottom:8px} html.pg-ueber-uns .pi-lbl{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-ueber-uns .pi-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-ueber-uns .port-info{padding:20px 24px;flex:1;display:flex;flex-direction:column} html.pg-ueber-uns .port-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-ueber-uns .port-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:4px} html.pg-ueber-uns .port-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px;flex:1} html.pg-ueber-uns .port-metrics{display:flex;gap:20px;flex-wrap:wrap} html.pg-ueber-uns .pm-num{font-family:var(--font-head);font-size:18px;color:var(--lime)} html.pg-ueber-uns .pm-lbl{font-size:11px;color:rgba(255,255,255,0.45)} html.pg-ueber-uns .port-link{display:block;background:rgba(255,255,255,0.07);color:#fff;text-align:center;padding:14px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--t)} html.pg-ueber-uns .port-link:hover{background:var(--purple)} /* TESTIMONIAL CARD */ html.pg-ueber-uns .testi-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--t)} html.pg-ueber-uns .testi-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-ueber-uns .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-ueber-uns .testi-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-ueber-uns .testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.1)} html.pg-ueber-uns .author-av{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-ueber-uns .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-ueber-uns .author-role{font-size:12px;color:var(--text-muted)} /* FAQ */ html.pg-ueber-uns .faq-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-ueber-uns .faq-sticky{position:sticky;top:100px} html.pg-ueber-uns .faq-list{display:flex;flex-direction:column;gap:4px} html.pg-ueber-uns .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--t)} html.pg-ueber-uns .faq-item.open{border-color:var(--purple)} html.pg-ueber-uns .faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-ueber-uns .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:transform var(--t),background var(--t)} html.pg-ueber-uns .faq-icon{position:relative;font-size:0!important} html.pg-ueber-uns .faq-icon::before, html.pg-ueber-uns .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-ueber-uns .faq-icon::after{width:2px;height:9px} html.pg-ueber-uns .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-ueber-uns .faq-ans{max-height:0;overflow:hidden;transition:max-height 0.32s ease} html.pg-ueber-uns .faq-item.open .faq-ans{max-height:250px} html.pg-ueber-uns .faq-ans-inner{padding:0 22px 20px;font-size:14px;color:var(--text-muted);line-height:1.75} /* REGION CARD */ html.pg-ueber-uns .region-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--t)} html.pg-ueber-uns .region-card:hover{background:var(--bg-card);border-color:var(--purple);transform:translateX(4px)} html.pg-ueber-uns .region-icon{width:36px;height:36px;border-radius:9px;background:var(--bg-lavender);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-ueber-uns .region-name{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:1px} html.pg-ueber-uns .region-sub{font-size:11px;color:var(--text-muted)} html.pg-ueber-uns .region-arrow{margin-left:auto;color:var(--text-muted);transition:var(--t);font-size:13px} html.pg-ueber-uns .region-card:hover .region-arrow{color:var(--purple)} /* WHY ITEM */ html.pg-ueber-uns .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--t)} html.pg-ueber-uns .why-item:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translateX(4px)} html.pg-ueber-uns .why-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-ueber-uns .why-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-ueber-uns .why-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* CTA SECTION */ html.pg-ueber-uns .cta-sec{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-ueber-uns .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-ueber-uns .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-ueber-uns .cta-h{font-family:var(--font-head);font-size:clamp(28px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-ueber-uns .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-ueber-uns .cta-acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-ueber-uns .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-ueber-uns .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-ueber-uns .cta-tick{color:var(--lime);font-weight:900} /* CTA FORM */ html.pg-ueber-uns .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-ueber-uns .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-ueber-uns .fg{margin-bottom:14px} html.pg-ueber-uns .fg input, html.pg-ueber-uns .fg textarea, html.pg-ueber-uns .fg select{width:100%;background:rgba(255,255,255,0.14);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--t);outline:none;-webkit-appearance:none;appearance:none} html.pg-ueber-uns .fg input::placeholder, html.pg-ueber-uns .fg textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-ueber-uns .fg input:focus, html.pg-ueber-uns .fg textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-ueber-uns .fg textarea{height:96px;resize:vertical} html.pg-ueber-uns .form-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.65);margin-bottom:16px;line-height:1.5} html.pg-ueber-uns .form-check input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime);cursor:pointer} html.pg-ueber-uns .form-check a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-ueber-uns .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:72px 0 32px} html.pg-ueber-uns .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px} html.pg-ueber-uns .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:14px;display:flex;align-items:center;gap:4px} html.pg-ueber-uns .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-ueber-uns .footer-contact a{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-bottom:5px;transition:var(--t)} html.pg-ueber-uns .footer-contact a:hover{color:var(--purple)} html.pg-ueber-uns .footer-socials{display:flex;gap:8px;margin-top:18px} html.pg-ueber-uns .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:var(--t);cursor:pointer} html.pg-ueber-uns .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-ueber-uns .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px;letter-spacing:-0.2px} html.pg-ueber-uns .footer-links{display:flex;flex-direction:column;gap:9px} html.pg-ueber-uns .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--t);font-weight:500} html.pg-ueber-uns .footer-links a:hover{color:var(--purple)} html.pg-ueber-uns .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-ueber-uns .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-ueber-uns .footer-legal{display:flex;gap:18px} html.pg-ueber-uns .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--t)} html.pg-ueber-uns .footer-legal a:hover{color:var(--purple)} /* WHATSAPP FLOAT */ html.pg-ueber-uns .wa-btn{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);transition:var(--t);text-decoration:none;border:none;cursor:pointer} html.pg-ueber-uns .wa-btn:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(37,211,102,0.5)} html.pg-ueber-uns .fade-up:nth-child(1){transition-delay:0s} html.pg-ueber-uns .fade-up:nth-child(2){transition-delay:0.08s} html.pg-ueber-uns .fade-up:nth-child(3){transition-delay:0.16s} html.pg-ueber-uns .fade-up:nth-child(4){transition-delay:0.24s} html.pg-ueber-uns .fade-up:nth-child(5){transition-delay:0.32s} /* MARQUEE */ html.pg-ueber-uns .marquee-wrap{overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)} html.pg-ueber-uns .marquee-track{display:flex;gap:0;animation:mq-pg-ueber-uns 24s linear infinite;white-space:nowrap;width:max-content} html.pg-ueber-uns .marquee-track:hover{animation-play-state:paused} html.pg-ueber-uns .mq-pg-ueber-uns-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:14px;padding:0 24px;color:var(--text-light);opacity:0.55;transition:var(--t);flex-shrink:0} html.pg-ueber-uns .mq-pg-ueber-uns-item:hover{opacity:1;color:var(--purple)} html.pg-ueber-uns .mq-pg-ueber-uns-sep{color:var(--purple);font-size:12px;opacity:0.3;flex-shrink:0} @keyframes mq-pg-ueber-uns{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* SKIP LINK */ html.pg-ueber-uns .skip-link{position:absolute;top:-60px;left:16px;background:var(--purple);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;z-index:999;transition:top 0.2s} html.pg-ueber-uns .skip-link:focus{top:16px} /* RESPONSIVE SYSTEM */ @media(max-width:1100px){ html.pg-ueber-uns .grid-2{gap:48px} html.pg-ueber-uns .cta-inner{gap:48px} html.pg-ueber-uns .faq-wrap{gap:48px} html.pg-ueber-uns .footer-grid{grid-template-columns:1fr 1fr;gap:40px} } @media(max-width:960px){ html.pg-ueber-uns .nav-links, html.pg-ueber-uns .nav-cta .btn-outline{display:none} html.pg-ueber-uns .nav-hamburger{display:flex;align-items:center;justify-content:center} html.pg-ueber-uns .grid-2, html.pg-ueber-uns .cta-inner, html.pg-ueber-uns .faq-wrap{grid-template-columns:1fr} html.pg-ueber-uns .faq-sticky{position:static} html.pg-ueber-uns .steps{grid-template-columns:1fr 1fr;gap:24px} html.pg-ueber-uns .steps::after{display:none} html.pg-ueber-uns .grid-3{grid-template-columns:1fr 1fr} html.pg-ueber-uns .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:640px){ html.pg-ueber-uns .container{padding:0 18px} html.pg-ueber-uns .s{padding:60px 0} html.pg-ueber-uns .s-sm{padding:48px 0} html.pg-ueber-uns .s-lg{padding:72px 0} html.pg-ueber-uns .page-hero{padding:106px 0 56px} html.pg-ueber-uns .page-hero-actions, html.pg-ueber-uns .cta-acts, html.pg-ueber-uns .mnav-cta{flex-direction:column} html.pg-ueber-uns .page-hero-actions .btn, html.pg-ueber-uns .cta-acts .btn, html.pg-ueber-uns .mnav-cta .btn{width:100%;justify-content:center} html.pg-ueber-uns .hero-stats{flex-direction:column} html.pg-ueber-uns .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:12px 0} html.pg-ueber-uns .hs-item:last-child{border-bottom:none} html.pg-ueber-uns .grid-3, html.pg-ueber-uns .grid-4{grid-template-columns:1fr} html.pg-ueber-uns .steps{grid-template-columns:1fr} html.pg-ueber-uns .steps::after{display:none} html.pg-ueber-uns .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-ueber-uns .footer-bottom{flex-direction:column;text-align:center} html.pg-ueber-uns .sec-hd, html.pg-ueber-uns .sec-hd-c{margin-bottom:40px} } /* ==================================================================== PAGE: webdesign-augsburg.html (scoped under html.pg-webdesign-augsburg) ==================================================================== */ html.pg-webdesign-augsburg{ --white: #FFFFFF; --off-white: #F8F7FF; --bg-lavender: #ECEAFF; --bg-card: #D8D5F5; --bg-card2: #E2E0F8; --purple: #7B6BE6; --purple-dark: #5A4BD4; --purple-hero: #7B6FE8; --lime: #CBFF4D; --lime-dark: #B8F020; --lime-section: #D4FF6E; --text-dark: #0F0D1A; --text-body: #2D2B3D; --text-muted: #6E6B85; --text-light: #9896A8; --border: rgba(123,107,230,0.15); --font-head: 'Dela Gothic One', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 100px; --shadow-sm: 0 2px 12px rgba(123,107,230,0.1); --shadow-md: 0 8px 32px rgba(123,107,230,0.15); --shadow-lg: 0 20px 60px rgba(123,107,230,0.2); --transition: 0.25s cubic-bezier(0.4,0,0.2,1); } html.pg-webdesign-augsburg{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} html.pg-webdesign-augsburg img{max-width:100%;display:block} /* Typography */ html.pg-webdesign-augsburg .display-xl{font-family:var(--font-head);font-size:clamp(36px,5vw,68px);line-height:1.05;color:var(--text-dark)} html.pg-webdesign-augsburg .display-lg{font-family:var(--font-head);font-size:clamp(28px,3.8vw,48px);line-height:1.1;color:var(--text-dark)} html.pg-webdesign-augsburg .btn-lime:hover{background:var(--lime-dark);transform:translateY(-2px)} html.pg-webdesign-augsburg .btn-outline{border:2px solid var(--text-dark);padding:15px 31px;} html.pg-webdesign-augsburg .btn-outline:hover{background:var(--text-dark);color:#fff;} /* NAV */ html.pg-webdesign-augsburg .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:var(--transition);background:transparent} html.pg-webdesign-augsburg .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-webdesign-augsburg .nav:has(~ .mobile-nav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-webdesign-augsburg .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-webdesign-augsburg .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px} html.pg-webdesign-augsburg .nav-logo-accent{color:var(--purple)} html.pg-webdesign-augsburg .nav-links{display:flex;align-items:center;gap:2px;list-style:none} html.pg-webdesign-augsburg .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--transition)} html.pg-webdesign-augsburg .nav-links a:hover, html.pg-webdesign-augsburg .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-links a:hover, html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-webdesign-augsburg .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-webdesign-augsburg .nav-dropdown{position:relative} html.pg-webdesign-augsburg .nav-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} html.pg-webdesign-augsburg .nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:230px;opacity:0;visibility:hidden;transition:var(--transition);box-shadow:var(--shadow-md)} html.pg-webdesign-augsburg .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible} html.pg-webdesign-augsburg .nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500} html.pg-webdesign-augsburg .nav-dropdown-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-webdesign-augsburg .nav-dropdown-menu a:hover, html.pg-webdesign-augsburg .nav-dropdown-menu a.active{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-webdesign-augsburg .nav-cta{display:flex;align-items:center;gap:10px} html.pg-webdesign-augsburg .nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text-dark);font-size:22px} html.pg-webdesign-augsburg .mobile-nav{display:none;position:fixed;inset:0;z-index:99;background:#fff;padding:90px 28px 40px;flex-direction:column;gap:4px;overflow-y:auto} html.pg-webdesign-augsburg .mobile-nav.open{display:flex} html.pg-webdesign-augsburg .mobile-nav>a{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:14px 0;border-bottom:1px solid var(--border);display:block;transition:var(--transition)} html.pg-webdesign-augsburg .mobile-nav>a:hover, html.pg-webdesign-augsburg .mobile-nav>a.active{color:var(--purple);font-weight:700} html.pg-webdesign-augsburg .mobile-nav-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px} /* PAGE HERO — Purple with breadcrumb */ html.pg-webdesign-augsburg .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-webdesign-augsburg .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.06) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-webdesign-augsburg .page-hero-inner{position:relative;z-index:1;max-width:990px} html.pg-webdesign-augsburg .breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-webdesign-augsburg .breadcrumb a{color:rgba(255,255,255,0.6);transition:var(--transition)} html.pg-webdesign-augsburg .breadcrumb a:hover{color:#fff} html.pg-webdesign-augsburg .breadcrumb-sep{color:rgba(255,255,255,0.3)} html.pg-webdesign-augsburg .page-hero h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} html.pg-webdesign-augsburg .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-webdesign-augsburg .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px} html.pg-webdesign-augsburg .page-hero-stats{display:flex;gap:0;flex-wrap:wrap} html.pg-webdesign-augsburg .hero-stat-item{padding:20px 32px;border-right:1px solid rgba(255,255,255,0.15);text-align:center} html.pg-webdesign-augsburg .hero-stat-item:first-child{padding-left:0} html.pg-webdesign-augsburg .hero-stat-item:last-child{border-right:none} html.pg-webdesign-augsburg .hsi-num{font-family:var(--font-head);font-size:clamp(28px,4vw,44px);color:var(--lime);line-height:1;margin-bottom:4px} html.pg-webdesign-augsburg .hsi-label{font-size:12px;color:rgba(255,255,255,0.6);font-weight:500} /* INTRO SECTION */ html.pg-webdesign-augsburg .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-webdesign-augsburg .intro-text{} html.pg-webdesign-augsburg .intro-illus{background:var(--bg-lavender);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;min-height:380px;position:relative;overflow:hidden} html.pg-webdesign-augsburg .intro-illus.has-image{ background: transparent; min-height: auto; border-radius: 0; overflow: visible; } html.pg-webdesign-augsburg .intro-illus.has-image img{ width: 100%; max-width: 420px; height: auto; display: block; } html.pg-webdesign-augsburg .illus-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px;border:2px dashed rgba(123,107,230,0.2);border-radius:var(--radius-lg);margin:24px;width:calc(100% - 48px)} html.pg-webdesign-augsburg .ip-icon{font-size:52px;opacity:0.35;margin-bottom:4px} html.pg-webdesign-augsburg .ip-label{font-size:10px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);opacity:0.7} html.pg-webdesign-augsburg .ip-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:220px} /* WHY AUGSBURG CONTEXT */ html.pg-webdesign-augsburg .context-section{background:var(--bg-lavender);padding:64px 0} html.pg-webdesign-augsburg .context-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} html.pg-webdesign-augsburg .context-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px} html.pg-webdesign-augsburg .fact-card{background:#fff;border-radius:var(--radius-md);padding:20px;border:1px solid var(--border)} html.pg-webdesign-augsburg .fact-num{font-family:var(--font-head);font-size:28px;color:var(--purple);margin-bottom:4px} html.pg-webdesign-augsburg .fact-label{font-size:13px;color:var(--text-muted)} /* SERVICES OVERVIEW */ html.pg-webdesign-augsburg .services-list{display:flex;flex-direction:column;gap:0} html.pg-webdesign-augsburg .service-item{display:flex;align-items:flex-start;gap:20px;padding:28px 0;border-bottom:1px solid var(--border);transition:var(--transition)} html.pg-webdesign-augsburg .service-item:last-child{border-bottom:none} html.pg-webdesign-augsburg .service-item:hover{padding-left:8px} html.pg-webdesign-augsburg .si-icon{width:48px;height:48px;border-radius:14px;background:var(--bg-lavender);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;margin-top:2px;transition:var(--transition)} html.pg-webdesign-augsburg .service-item:hover .si-icon{background:var(--purple);color:#fff} html.pg-webdesign-augsburg .si-content{} html.pg-webdesign-augsburg .si-title{font-family:var(--font-head);font-size:18px;color:var(--text-dark);margin-bottom:6px} html.pg-webdesign-augsburg .si-desc{font-size:14px;color:var(--text-muted);line-height:1.65} html.pg-webdesign-augsburg .si-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px} html.pg-webdesign-augsburg .si-tag{font-size:11px;font-weight:700;background:var(--bg-card2);border-radius:6px;padding:3px 10px;color:var(--text-muted)} /* PROCESS STEPS */ html.pg-webdesign-augsburg .process-section{background:var(--lime-section);padding:88px 0} html.pg-webdesign-augsburg .process-header{text-align:center;margin-bottom:64px} html.pg-webdesign-augsburg .steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} html.pg-webdesign-augsburg .steps-grid::before{content:'';position:absolute;top:32px;left:10%;right:10%;height:2px;background:rgba(15,13,26,0.1);z-index:0} html.pg-webdesign-augsburg .step-card{text-align:center;padding:0 12px;position:relative;z-index:1} html.pg-webdesign-augsburg .step-circle{width:64px;height:64px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:22px;margin:0 auto 16px;transition:var(--transition)} html.pg-webdesign-augsburg .step-card:hover .step-circle{background:var(--purple);transform:scale(1.1)} html.pg-webdesign-augsburg .step-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:8px} html.pg-webdesign-augsburg .step-desc{font-size:12px;color:var(--text-body);line-height:1.6} /* PORTFOLIO PREVIEW */ html.pg-webdesign-augsburg .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px} html.pg-webdesign-augsburg .portfolio-card{background:var(--text-dark);border-radius:var(--radius-xl);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column} html.pg-webdesign-augsburg .portfolio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} html.pg-webdesign-augsburg .portfolio-img{height:200px;background:rgba(123,107,230,0.2);display:flex;align-items:center;justify-content:center;position:relative} html.pg-webdesign-augsburg .portfolio-img-inner{text-align:center;padding:20px} html.pg-webdesign-augsburg .pii-icon{font-size:36px;opacity:0.35;margin-bottom:8px} html.pg-webdesign-augsburg .pii-label{font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);opacity:0.7;margin-bottom:4px} html.pg-webdesign-augsburg .pii-desc{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4} html.pg-webdesign-augsburg .portfolio-info{padding:20px 24px 24px;flex:1} html.pg-webdesign-augsburg .portfolio-tag{font-size:11px;font-weight:700;color:var(--lime);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px} html.pg-webdesign-augsburg .portfolio-title{font-family:var(--font-head);font-size:18px;color:#fff;margin-bottom:6px} html.pg-webdesign-augsburg .portfolio-sub{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:14px} html.pg-webdesign-augsburg .portfolio-link{display:block;background:rgba(255,255,255,0.08);color:#fff;text-align:center;padding:12px;font-weight:700;font-size:13px;border-top:1px solid rgba(255,255,255,0.06);transition:var(--transition);border-radius:0 0 var(--radius-xl) var(--radius-xl)} html.pg-webdesign-augsburg .portfolio-link:hover{background:var(--purple)} /* WHY US — diff */ html.pg-webdesign-augsburg .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} html.pg-webdesign-augsburg .why-list{display:flex;flex-direction:column;gap:12px;margin-top:32px} html.pg-webdesign-augsburg .why-item{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--bg-card2);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--transition)} html.pg-webdesign-augsburg .why-item:hover{background:var(--bg-card);border-color:rgba(123,107,230,0.3);transform:translateX(4px)} html.pg-webdesign-augsburg .wi-check{width:28px;height:28px;border-radius:50%;background:var(--text-dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;margin-top:2px} html.pg-webdesign-augsburg .wi-title{font-weight:700;font-size:14px;color:var(--text-dark);margin-bottom:3px} html.pg-webdesign-augsburg .wi-desc{font-size:13px;color:var(--text-muted);line-height:1.6} /* TESTIMONIALS */ html.pg-webdesign-augsburg .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} html.pg-webdesign-augsburg .testimonial-card{background:var(--bg-lavender);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:14px;transition:var(--transition)} html.pg-webdesign-augsburg .testimonial-card:hover{background:var(--bg-card);transform:translateY(-4px);box-shadow:var(--shadow-sm)} html.pg-webdesign-augsburg .stars{display:flex;gap:3px;color:#F5A623;font-size:16px} html.pg-webdesign-augsburg .testimonial-text{font-size:14px;color:var(--text-body);line-height:1.7;font-style:italic;flex:1} html.pg-webdesign-augsburg .testimonial-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(123,107,230,0.12)} html.pg-webdesign-augsburg .author-avatar{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:16px;color:var(--lime);flex-shrink:0} html.pg-webdesign-augsburg .author-name{font-weight:700;font-size:13px;color:var(--text-dark);margin-bottom:2px} html.pg-webdesign-augsburg .author-role{font-size:12px;color:var(--text-muted)} /* REGIONS */ html.pg-webdesign-augsburg .regions-section{background:var(--purple);padding:64px 0} html.pg-webdesign-augsburg .regions-header{text-align:center;margin-bottom:40px} html.pg-webdesign-augsburg .regions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} html.pg-webdesign-augsburg .region-card{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.15);border-radius:var(--radius-md);padding:16px;display:flex;align-items:center;gap:10px;transition:var(--transition);cursor:pointer;min-width:0} html.pg-webdesign-augsburg .region-card>div{min-width:0} html.pg-webdesign-augsburg .region-card:hover{background:rgba(255,255,255,0.18);border-color:var(--lime);transform:translateX(4px)} html.pg-webdesign-augsburg .region-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} html.pg-webdesign-augsburg .region-name{font-family:var(--font-head);font-size:14px;color:#fff;margin-bottom:1px} html.pg-webdesign-augsburg .region-sub{font-size:11px;color:rgba(255,255,255,0.55)} html.pg-webdesign-augsburg .region-arrow{margin-left:auto;color:rgba(255,255,255,0.4);transition:var(--transition);font-size:13px} html.pg-webdesign-augsburg .region-card:hover .region-arrow{color:var(--lime)} /* FAQ */ html.pg-webdesign-augsburg .faq-section{background:var(--bg-lavender);padding:88px 0} html.pg-webdesign-augsburg .faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-webdesign-augsburg .services-cols{grid-template-columns:1fr 1fr} html.pg-webdesign-augsburg .faq-left{position:sticky;top:100px} html.pg-webdesign-augsburg .faq-right{display:flex;flex-direction:column;gap:4px} html.pg-webdesign-augsburg .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--transition)} html.pg-webdesign-augsburg .faq-item.open{border-color:var(--purple)} html.pg-webdesign-augsburg .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-webdesign-augsburg .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:var(--transition)} html.pg-webdesign-augsburg .faq-icon{position:relative;font-size:0!important} html.pg-webdesign-augsburg .faq-icon::before, html.pg-webdesign-augsburg .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-webdesign-augsburg .faq-icon::after{width:2px;height:9px} html.pg-webdesign-augsburg .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-webdesign-augsburg .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease} html.pg-webdesign-augsburg .faq-item.open .faq-answer{max-height:200px} html.pg-webdesign-augsburg .faq-answer-inner{padding:0 22px 18px;font-size:14px;color:var(--text-muted);line-height:1.75} /* CTA */ html.pg-webdesign-augsburg .cta-section{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-webdesign-augsburg .cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px} html.pg-webdesign-augsburg .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-webdesign-augsburg .cta-title{font-family:var(--font-head);font-size:clamp(30px,4vw,52px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-webdesign-augsburg .cta-sub{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:32px;max-width:440px} html.pg-webdesign-augsburg .cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px} html.pg-webdesign-augsburg .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-webdesign-augsburg .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75);font-weight:500} html.pg-webdesign-augsburg .cta-check{color:var(--lime);font-size:15px;font-weight:900} html.pg-webdesign-augsburg .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-webdesign-augsburg .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-webdesign-augsburg .form-group{margin-bottom:14px} html.pg-webdesign-augsburg .form-group input, html.pg-webdesign-augsburg .form-group textarea{width:100%;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--transition);outline:none} html.pg-webdesign-augsburg .form-group input::placeholder, html.pg-webdesign-augsburg .form-group textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-webdesign-augsburg .form-group input:focus, html.pg-webdesign-augsburg .form-group textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-webdesign-augsburg .form-group textarea{height:100px;resize:none} html.pg-webdesign-augsburg .form-dsgvo{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:16px} html.pg-webdesign-augsburg .form-dsgvo input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lime)} html.pg-webdesign-augsburg .form-dsgvo a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-webdesign-augsburg .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:64px 0 32px} html.pg-webdesign-augsburg .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} html.pg-webdesign-augsburg .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:12px;display:flex;align-items:center;gap:4px} html.pg-webdesign-augsburg .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-webdesign-augsburg .footer-socials{display:flex;gap:8px} html.pg-webdesign-augsburg .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--transition);cursor:pointer} html.pg-webdesign-augsburg .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-webdesign-augsburg .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px} html.pg-webdesign-augsburg .footer-links{list-style:none;display:flex;flex-direction:column;gap:9px} html.pg-webdesign-augsburg .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--transition);font-weight:500} html.pg-webdesign-augsburg .footer-links a:hover{color:var(--purple)} html.pg-webdesign-augsburg .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-webdesign-augsburg .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-webdesign-augsburg .footer-legal{display:flex;gap:18px} html.pg-webdesign-augsburg .footer-legal a{font-size:13px;color:var(--text-muted);transition:var(--transition)} html.pg-webdesign-augsburg .footer-legal a:hover{color:var(--purple)} /* WhatsApp float */ html.pg-webdesign-augsburg .wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);cursor:pointer;transition:var(--transition)} html.pg-webdesign-augsburg .wa-float:hover{transform:scale(1.12)} html.pg-webdesign-augsburg .fade-up:nth-child(2){transition-delay:0.1s} html.pg-webdesign-augsburg .fade-up:nth-child(3){transition-delay:0.2s} html.pg-webdesign-augsburg .fade-up:nth-child(4){transition-delay:0.3s} /* RESPONSIVE */ @media(max-width:1024px){ html.pg-webdesign-augsburg .intro-grid, html.pg-webdesign-augsburg .why-grid, html.pg-webdesign-augsburg .cta-inner, html.pg-webdesign-augsburg .faq-layout{grid-template-columns:1fr} html.pg-webdesign-augsburg .steps-grid{grid-template-columns:repeat(3,1fr);gap:24px} html.pg-webdesign-augsburg .steps-grid::before{display:none} html.pg-webdesign-augsburg .portfolio-grid{grid-template-columns:1fr 1fr} html.pg-webdesign-augsburg .regions-grid{grid-template-columns:repeat(2,1fr)} html.pg-webdesign-augsburg .testimonials-grid{grid-template-columns:1fr 1fr} html.pg-webdesign-augsburg .footer-grid{grid-template-columns:1fr 1fr} html.pg-webdesign-augsburg .nav-links{display:none} html.pg-webdesign-augsburg .nav-menu-btn{display:flex} html.pg-webdesign-augsburg .nav-cta .btn-outline{display:none} html.pg-webdesign-augsburg .faq-left{position:static} html.pg-webdesign-augsburg .context-grid{grid-template-columns:1fr} } @media(max-width:640px){ html.pg-webdesign-augsburg .container{padding:0 18px} html.pg-webdesign-augsburg .section{padding:60px 0} html.pg-webdesign-augsburg .page-hero{padding:110px 0 60px} html.pg-webdesign-augsburg .page-hero-stats{flex-direction:column} html.pg-webdesign-augsburg .hero-stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);padding:14px 0} html.pg-webdesign-augsburg .hero-stat-item:last-child{border-bottom:none} html.pg-webdesign-augsburg .steps-grid{grid-template-columns:1fr} html.pg-webdesign-augsburg .portfolio-grid{grid-template-columns:1fr} html.pg-webdesign-augsburg .testimonials-grid{grid-template-columns:1fr} html.pg-webdesign-augsburg .regions-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} html.pg-webdesign-augsburg .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-webdesign-augsburg .footer-bottom{flex-direction:column;text-align:center} html.pg-webdesign-augsburg .page-hero-actions{flex-direction:column} html.pg-webdesign-augsburg .page-hero-actions .btn{width:100%;justify-content:center} html.pg-webdesign-augsburg .cta-actions{flex-direction:column} html.pg-webdesign-augsburg .cta-actions .btn{width:100%;justify-content:center} html.pg-webdesign-augsburg .context-facts{grid-template-columns:1fr 1fr} html.pg-webdesign-augsburg .services-cols{grid-template-columns:1fr;gap:24px} } /* ==================================================================== PAGE: website-erstellen-lassen.html (scoped under html.pg-website-erstellen-lassen) ==================================================================== */ html.pg-website-erstellen-lassen{--white:#FFFFFF;--off-white:#F8F7FF;--bg-lavender:#ECEAFF;--bg-card:#D8D5F5;--bg-card2:#E2E0F8;--purple:#7B6BE6;--purple-dark:#5A4BD4;--purple-hero:#7B6FE8;--lime:#CBFF4D;--lime-dark:#B8F020;--lime-section:#D4FF6E;--text-dark:#0F0D1A;--text-body:#2D2B3D;--text-muted:#6E6B85;--text-light:#9896A8;--border:rgba(123,107,230,0.15);--font-head:'Dela Gothic One',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:100px;--shadow-sm:0 2px 12px rgba(123,107,230,0.1);--shadow-md:0 8px 32px rgba(123,107,230,0.15);--shadow-lg:0 20px 60px rgba(123,107,230,0.2);--transition:0.25s cubic-bezier(0.4,0,0.2,1)} html.pg-website-erstellen-lassen{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} html.pg-website-erstellen-lassen img{max-width:100%;display:block} html.pg-website-erstellen-lassen .display-lg{font-family:var(--font-head);font-size:clamp(28px,3.8vw,48px);line-height:1.1;color:var(--text-dark)} html.pg-website-erstellen-lassen .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:15px;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--transition);white-space:nowrap;text-decoration:none} html.pg-website-erstellen-lassen .btn-primary:hover{background:#1a1730;transform:translateY(-2px)} html.pg-website-erstellen-lassen .btn-lime:hover{background:var(--lime-dark);transform:translateY(-2px)} html.pg-website-erstellen-lassen .btn-outline{border:2px solid var(--text-dark);padding:15px 31px;} html.pg-website-erstellen-lassen .btn-outline:hover{background:var(--text-dark);color:#fff;} /* NAV */ html.pg-website-erstellen-lassen .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:var(--transition);background:transparent} html.pg-website-erstellen-lassen .nav.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-website-erstellen-lassen .nav:has(~ .mobile-nav.open){background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(123,107,230,0.1)} html.pg-website-erstellen-lassen .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px} html.pg-website-erstellen-lassen .nav-logo{font-family:var(--font-head);font-size:22px;color:var(--text-dark);display:flex;align-items:center;gap:4px} html.pg-website-erstellen-lassen .nav-logo-accent{color:var(--purple)} html.pg-website-erstellen-lassen .nav-links{display:flex;align-items:center;gap:2px;list-style:none} html.pg-website-erstellen-lassen .nav-links a{font-size:14px;font-weight:600;color:var(--text-body);padding:8px 14px;border-radius:var(--radius-pill);transition:var(--transition)} html.pg-website-erstellen-lassen .nav-links a:hover, html.pg-website-erstellen-lassen .nav-links a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-links a:hover, html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-links a.active{color:var(--lime);background:rgba(255,255,255,0.14)} html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-dropdown-menu a:hover, html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-dropdown-menu a.active, html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-drop-menu a:hover, html.pg-website-erstellen-lassen .nav:not(.scrolled) .nav-drop-menu a.active{color:var(--purple);background:rgba(123,107,230,0.07)} html.pg-website-erstellen-lassen .nav-dropdown{position:relative} html.pg-website-erstellen-lassen .nav-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} html.pg-website-erstellen-lassen .nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:230px;opacity:0;visibility:hidden;transition:var(--transition);box-shadow:var(--shadow-md)} html.pg-website-erstellen-lassen .nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible} html.pg-website-erstellen-lassen .nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;border-radius:10px;color:var(--text-body);font-weight:500} html.pg-website-erstellen-lassen .nav-dropdown-menu a .dm-icon{font-size:16px;flex-shrink:0} html.pg-website-erstellen-lassen .nav-dropdown-menu a:hover, html.pg-website-erstellen-lassen .nav-dropdown-menu a.active{background:rgba(123,107,230,0.07);color:var(--purple)} html.pg-website-erstellen-lassen .nav-cta{display:flex;align-items:center;gap:10px} html.pg-website-erstellen-lassen .nav-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text-dark);font-size:22px} html.pg-website-erstellen-lassen .mobile-nav{display:none;position:fixed;inset:0;z-index:99;background:#fff;padding:90px 28px 40px;flex-direction:column;gap:4px;overflow-y:auto} html.pg-website-erstellen-lassen .mobile-nav.open{display:flex} html.pg-website-erstellen-lassen .mobile-nav>a{font-family:var(--font-head);font-size:22px;color:var(--text-dark);padding:14px 0;border-bottom:1px solid var(--border);display:block} html.pg-website-erstellen-lassen .mobile-nav>a:hover, html.pg-website-erstellen-lassen .mobile-nav>a.active{color:var(--purple);font-weight:700} html.pg-website-erstellen-lassen .mobile-nav-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px} /* PAGE HERO */ html.pg-website-erstellen-lassen .page-hero{background:var(--purple-hero);padding:140px 0 80px;position:relative;overflow:hidden} html.pg-website-erstellen-lassen .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.06) 1.5px,transparent 1.5px);background-size:36px 36px;pointer-events:none} html.pg-website-erstellen-lassen .page-hero-inner{position:relative;z-index:1;max-width:990px} html.pg-website-erstellen-lassen .breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;color:rgba(255,255,255,0.6)} html.pg-website-erstellen-lassen .breadcrumb a{color:rgba(255,255,255,0.6)} html.pg-website-erstellen-lassen .breadcrumb a:hover{color:#fff} html.pg-website-erstellen-lassen .breadcrumb-sep{color:rgba(255,255,255,0.3)} html.pg-website-erstellen-lassen .page-hero h1{font-family:var(--font-head);font-size:clamp(34px,5.5vw,68px);line-height:1.05;color:var(--lime);margin-bottom:20px;letter-spacing:-0.5px} @media(min-width:1025px){html.pg-website-erstellen-lassen .page-hero h1{max-width:980px}} html.pg-website-erstellen-lassen .page-hero-sub{font-size:clamp(16px,1.8vw,20px);color:rgba(255,255,255,0.85);line-height:1.65;max-width:580px;margin-bottom:36px} html.pg-website-erstellen-lassen .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap} /* COMPARISON TABLE */ html.pg-website-erstellen-lassen .comparison-section{background:var(--white);padding:88px 0} html.pg-website-erstellen-lassen .comparison-header{text-align:center;margin-bottom:56px} html.pg-website-erstellen-lassen .comparison-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)} html.pg-website-erstellen-lassen .comparison-table th{padding:20px 24px;font-family:var(--font-head);font-size:16px;text-align:left} html.pg-website-erstellen-lassen .comparison-table th:first-child{background:var(--bg-lavender);color:var(--text-dark)} html.pg-website-erstellen-lassen .comparison-table th.col-agency{background:var(--purple);color:#fff} html.pg-website-erstellen-lassen .comparison-table th.col-agency span{display:block;font-family:var(--font-body);font-size:12px;font-weight:500;color:rgba(255,255,255,0.7);margin-top:2px} html.pg-website-erstellen-lassen .comparison-table th.col-diy{background:var(--bg-card2);color:var(--text-muted)} html.pg-website-erstellen-lassen .comparison-table td{padding:16px 24px;font-size:14px;border-bottom:1px solid var(--border)} html.pg-website-erstellen-lassen .comparison-table tr:last-child td{border-bottom:none} html.pg-website-erstellen-lassen .comparison-table td:first-child{font-weight:700;color:var(--text-dark);background:var(--bg-lavender)} html.pg-website-erstellen-lassen .comparison-table td.agency{background:rgba(123,107,230,0.04);color:var(--purple);font-weight:600} html.pg-website-erstellen-lassen .comparison-table td.diy{background:rgba(226,224,248,0.3);color:var(--text-muted)} html.pg-website-erstellen-lassen .check{color:var(--purple);font-weight:800} html.pg-website-erstellen-lassen .cross{color:#E24B4A;font-weight:800} /* PROCESS */ html.pg-website-erstellen-lassen .process-timeline{display:flex;flex-direction:column;gap:0;max-width:780px;margin:0 auto} html.pg-website-erstellen-lassen .timeline-item{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--border);position:relative;align-items:start} html.pg-website-erstellen-lassen .timeline-item:last-child{border-bottom:none} html.pg-website-erstellen-lassen .timeline-num{font-family:var(--font-head);font-size:48px;color:var(--text-dark);line-height:1;text-align:center} html.pg-website-erstellen-lassen .timeline-content{} html.pg-website-erstellen-lassen .timeline-title{font-family:var(--font-head);font-size:22px;color:var(--text-dark);margin-bottom:8px} html.pg-website-erstellen-lassen .timeline-desc{font-size:15px;color:var(--text-muted);line-height:1.7;margin-bottom:12px} html.pg-website-erstellen-lassen .timeline-tags{display:flex;gap:8px;flex-wrap:wrap} html.pg-website-erstellen-lassen .timeline-tag{font-size:11px;font-weight:700;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-radius:6px;padding:4px 10px;color:var(--text-muted)} /* WHAT IS INCLUDED */ html.pg-website-erstellen-lassen .included-section{background:var(--off-white);padding:88px 0} html.pg-website-erstellen-lassen .included-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px} html.pg-website-erstellen-lassen .included-card{background:rgba(255,255,255,0.6);border-radius:var(--radius-lg);padding:24px;border:1px solid rgba(15,13,26,0.08);transition:var(--transition)} html.pg-website-erstellen-lassen .included-card:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:rgba(123,107,230,0.2);} html.pg-website-erstellen-lassen .included-card-icon{font-size:28px;margin-bottom:12px} html.pg-website-erstellen-lassen .included-card-title{font-family:var(--font-head);font-size:17px;color:var(--text-dark);margin-bottom:8px} html.pg-website-erstellen-lassen .included-card-desc{font-size:13px;color:var(--text-body);line-height:1.65} /* FAQ */ html.pg-website-erstellen-lassen .faq-section{background:var(--bg-lavender);padding:88px 0} html.pg-website-erstellen-lassen .faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start} html.pg-website-erstellen-lassen .faq-left{position:sticky;top:100px} html.pg-website-erstellen-lassen .faq-right{display:flex;flex-direction:column;gap:4px} html.pg-website-erstellen-lassen .faq-item{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1.5px solid rgba(123,107,230,0.1);transition:var(--transition)} html.pg-website-erstellen-lassen .faq-item.open{border-color:var(--purple)} html.pg-website-erstellen-lassen .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14px;color:var(--text-dark);user-select:none} html.pg-website-erstellen-lassen .faq-icon{width:26px;height:26px;border-radius:50%;background:rgba(123,107,230,0.1);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:17px;line-height:1;flex-shrink:0;transition:var(--transition)} html.pg-website-erstellen-lassen .faq-icon{position:relative;font-size:0!important} html.pg-website-erstellen-lassen .faq-icon::before, html.pg-website-erstellen-lassen .faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:2px;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)} html.pg-website-erstellen-lassen .faq-icon::after{width:2px;height:9px} html.pg-website-erstellen-lassen .faq-item.open .faq-icon{transform:rotate(45deg);background:var(--purple);color:#fff} html.pg-website-erstellen-lassen .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease} html.pg-website-erstellen-lassen .faq-item.open .faq-answer{max-height:220px} html.pg-website-erstellen-lassen .faq-answer-inner{padding:0 22px 18px;font-size:14px;color:var(--text-muted);line-height:1.75} /* CTA */ html.pg-website-erstellen-lassen .cta-section{background:var(--purple);padding:88px 0;position:relative;overflow:hidden} html.pg-website-erstellen-lassen .cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1.5px,transparent 1.5px);background-size:36px 36px} html.pg-website-erstellen-lassen .cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} html.pg-website-erstellen-lassen .cta-title{font-family:var(--font-head);font-size:clamp(28px,4vw,50px);color:var(--lime);line-height:1.05;margin-bottom:14px} html.pg-website-erstellen-lassen .cta-sub{font-size:16px;color:rgba(255,255,255,0.8);line-height:1.65;margin-bottom:28px} html.pg-website-erstellen-lassen .cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px} html.pg-website-erstellen-lassen .cta-trust{display:flex;flex-direction:column;gap:8px} html.pg-website-erstellen-lassen .cta-trust-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.75)} html.pg-website-erstellen-lassen .cta-check{color:var(--lime);font-size:15px;font-weight:900} html.pg-website-erstellen-lassen .cta-form{background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-xl);padding:32px} html.pg-website-erstellen-lassen .form-title{font-family:var(--font-head);font-size:20px;color:#fff;margin-bottom:20px} html.pg-website-erstellen-lassen .form-group{margin-bottom:14px} html.pg-website-erstellen-lassen .form-group input, html.pg-website-erstellen-lassen .form-group textarea{width:100%;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-body);font-size:14px;color:#fff;transition:var(--transition);outline:none} html.pg-website-erstellen-lassen .form-group input::placeholder, html.pg-website-erstellen-lassen .form-group textarea::placeholder{color:rgba(255,255,255,0.5)} html.pg-website-erstellen-lassen .form-group input:focus, html.pg-website-erstellen-lassen .form-group textarea:focus{border-color:var(--lime);background:rgba(255,255,255,0.2)} html.pg-website-erstellen-lassen .form-group textarea{height:100px;resize:none} html.pg-website-erstellen-lassen .form-dsgvo{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:16px} html.pg-website-erstellen-lassen .form-dsgvo input{width:16px;height:16px;margin-top:2px;accent-color:var(--lime)} html.pg-website-erstellen-lassen .form-dsgvo a{color:var(--lime);text-decoration:underline} /* FOOTER */ html.pg-website-erstellen-lassen .footer{background:var(--bg-lavender);border-top:1px solid var(--border);padding:64px 0 32px} html.pg-website-erstellen-lassen .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} html.pg-website-erstellen-lassen .footer-logo{font-family:var(--font-head);font-size:26px;color:var(--text-dark);margin-bottom:12px;display:flex;align-items:center;gap:4px} html.pg-website-erstellen-lassen .footer-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px} html.pg-website-erstellen-lassen .footer-socials{display:flex;gap:8px} html.pg-website-erstellen-lassen .social-btn{width:38px;height:38px;border-radius:9px;background:rgba(123,107,230,0.1);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;transition:var(--transition);cursor:pointer} html.pg-website-erstellen-lassen .social-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff} html.pg-website-erstellen-lassen .footer-col-title{font-family:var(--font-head);font-size:14px;color:var(--text-dark);margin-bottom:16px} html.pg-website-erstellen-lassen .footer-links{list-style:none;display:flex;flex-direction:column;gap:9px} html.pg-website-erstellen-lassen .footer-links a{font-size:14px;color:var(--text-muted);transition:var(--transition);font-weight:500} html.pg-website-erstellen-lassen .footer-links a:hover{color:var(--purple)} html.pg-website-erstellen-lassen .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1.5px solid var(--border);gap:16px;flex-wrap:wrap} html.pg-website-erstellen-lassen .footer-copy{font-size:13px;color:var(--text-muted)} html.pg-website-erstellen-lassen .footer-legal{display:flex;gap:18px} html.pg-website-erstellen-lassen .footer-legal a{font-size:13px;color:var(--text-muted)} html.pg-website-erstellen-lassen .footer-legal a:hover{color:var(--purple)} html.pg-website-erstellen-lassen .wa-float{position:fixed;bottom:24px;right:24px;z-index:200;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 24px rgba(37,211,102,0.4);cursor:pointer;transition:var(--transition)} html.pg-website-erstellen-lassen .wa-float:hover{transform:scale(1.12)} html.pg-website-erstellen-lassen .fade-up:nth-child(2){transition-delay:0.1s} html.pg-website-erstellen-lassen .fade-up:nth-child(3){transition-delay:0.2s} @media(max-width:1024px){ html.pg-website-erstellen-lassen .cta-inner, html.pg-website-erstellen-lassen .faq-layout{grid-template-columns:1fr} html.pg-website-erstellen-lassen .included-grid{grid-template-columns:1fr 1fr} html.pg-website-erstellen-lassen .footer-grid{grid-template-columns:1fr 1fr} html.pg-website-erstellen-lassen .nav-links{display:none} html.pg-website-erstellen-lassen .nav-menu-btn{display:flex} html.pg-website-erstellen-lassen .nav-cta .btn-outline{display:none} html.pg-website-erstellen-lassen .faq-left{position:static} } @media(max-width:640px){ html.pg-website-erstellen-lassen .container{padding:0 18px} html.pg-website-erstellen-lassen .section{padding:60px 0} html.pg-website-erstellen-lassen .page-hero{padding:110px 0 60px} html.pg-website-erstellen-lassen .page-hero-actions{flex-direction:column} html.pg-website-erstellen-lassen .page-hero-actions .btn{width:100%;justify-content:center} html.pg-website-erstellen-lassen .included-grid{grid-template-columns:1fr} html.pg-website-erstellen-lassen .timeline-item{grid-template-columns:50px 1fr;gap:16px} html.pg-website-erstellen-lassen .timeline-num{font-size:32px} html.pg-website-erstellen-lassen .comparison-table{font-size:11.5px;table-layout:fixed;width:100%;box-shadow:none;border-radius:14px} html.pg-website-erstellen-lassen .comparison-table th, html.pg-website-erstellen-lassen .comparison-table td{padding:11px 12px;vertical-align:top;line-height:1.35;word-break:normal;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto} html.pg-website-erstellen-lassen .comparison-table th{padding:14px 12px;font-size:12px} html.pg-website-erstellen-lassen .comparison-table th:first-child, html.pg-website-erstellen-lassen .comparison-table td:first-child{width:36%} html.pg-website-erstellen-lassen .comparison-table th.col-agency span{font-size:10px} html.pg-website-erstellen-lassen .intro-stats{justify-content:center;text-align:center} html.pg-website-erstellen-lassen .footer-grid{grid-template-columns:1fr;gap:28px} html.pg-website-erstellen-lassen .footer-bottom{flex-direction:column;text-align:center} html.pg-website-erstellen-lassen .cta-actions{flex-direction:column} html.pg-website-erstellen-lassen .cta-actions .btn{width:100%;justify-content:center} } @media(max-width:960px){html.pg-website-erstellen-lassen [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important;}} @media(max-width:640px){html.pg-website-erstellen-lassen [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}} @media(max-width:960px){html.pg-website-erstellen-lassen [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important;}} @media(max-width:640px){html.pg-website-erstellen-lassen [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}} @media(max-width:860px){html.pg-website-erstellen-lassen [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;gap:40px!important;}html.pg-website-erstellen-lassen [style*="grid-template-columns:1fr 1fr"]>*{min-width:0;}} /* TESTIMONIALS HEADER - shared responsive */ @media(max-width:640px){ .testi-header-split{ flex-direction:column !important; align-items:center !important; text-align:center; } .testi-header-split > div:first-child{ text-align:center; } .testi-header-split > div:first-child > div{ justify-content:center !important; } .testi-header-split a[href*="google"]{ flex-direction:column !important; align-items:center !important; } .testi-header-split a[href*="google"] img{ width:140px !important; } .testi-header-split a[href*="google"] span{ white-space:normal !important; text-align:center; } }