:root{ --bg:#0a0d13; --bg-alt:#0d1119; --card:#111621; --card-hi:#151b28; --border:rgba(255,255,255,.08); --border-hi:rgba(255,255,255,.15); --text:#f2f4f8; --fg-strong:#ffffff; /* headline/emphasis text — flips in light theme, unlike --accent-driven white-on-color text */ --invert-bg:#ffffff; /* .btn-primary hover fill — the 'opposite extreme' of the page, flips per theme */ --overlay-rgb:8,15,17; /* header/mobile-menu translucent backdrop, as r,g,b so alpha can vary per use */ --chart-grid:rgba(255,255,255,.06); --chart-baseline:rgba(255,255,255,.14); --muted:#98a1b8; --muted-lo:#6d7690; --ok:#3fbf8a; --bad:#e0585a; --wa:#25d366; /* accent — a restrained navy-blue instead of the previous bright teal; reads as more corporate/trustworthy and echoes Meta's own blue. */ --accent:#3f6bd8; --accent-dark:#2c4fac; --accent-glow:rgba(63,107,216,.30); } /* ---------- LIGHT THEME ---------- */ /* Toggled via [data-theme="light"] on (see site.js). Every rule in this file reads color from the variables above, so overriding just the palette here re-skins the whole site without touching component CSS. */ [data-theme="light"]{ --bg:#f6f7fb; --bg-alt:#eceef5; --card:#ffffff; --card-hi:#ffffff; --border:rgba(10,15,30,.09); --border-hi:rgba(10,15,30,.16); --text:#333a4d; --fg-strong:#0a0d13; --invert-bg:#0a0d13; --overlay-rgb:246,247,251; --chart-grid:rgba(10,15,30,.08); --chart-baseline:rgba(10,15,30,.18); --muted:#5b6178; --muted-lo:#848aa0; --accent-glow:rgba(63,107,216,.16); } [data-theme="light"] .btn-primary:hover{color:#fff;} [data-theme="light"] .cookie-banner{box-shadow:0 -18px 46px -20px rgba(20,25,40,.16);} *{box-sizing:border-box;} html{scroll-behavior:smooth;background:var(--bg);} body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', sans-serif; font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; margin:0; letter-spacing:-0.01em; color:var(--fg-strong); } p{margin:0;} a{color:inherit;} img{max-width:100%;display:block;} ul{margin:0;padding:0;list-style:none;} .mono{font-family:'IBM Plex Mono', monospace;} .wrap{max-width:1160px;margin:0 auto;padding:0 28px;} .accent{color:var(--accent);transition:color .3s ease;} .pill{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--border-hi); background:rgba(255,255,255,.03); padding:7px 16px;border-radius:99px; font-family:'IBM Plex Mono', monospace; font-size:12px;letter-spacing:.06em;text-transform:uppercase; color:var(--accent); transition:color .3s ease; } .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);transition:background .3s ease;} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:'IBM Plex Sans', sans-serif; font-weight:600;font-size:14.5px; padding:14px 24px; border-radius:99px; text-decoration:none; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease, color .2s ease; cursor:pointer; } .btn svg{width:17px;height:17px;flex-shrink:0;} /* PRIMARY — the one action we want clicked. Solid fill + permanent shadow so it visibly sits "above" the page even before hovering. */ .btn-primary{ background:var(--accent);color:#fff; box-shadow:0 10px 26px -10px var(--accent-glow); } .btn-primary:hover{background:var(--invert-bg);color:var(--accent-dark);transform:translateY(-2px);box-shadow:0 16px 36px -10px var(--accent-glow);} /* SECONDARY (ghost) — clearly a step down from primary: outline only, no fill, muted text. Reads as "also possible" not "do this". */ .btn-ghost{border-color:var(--border);color:var(--muted);background:transparent;box-shadow:none;} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);} .btn-call{background:var(--card);border-color:var(--border-hi);color:#fff;} .btn-call:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);} .btn-whatsapp{background:var(--card);border-color:rgba(37,211,102,.4);color:var(--wa);} .btn-whatsapp:hover{background:var(--wa);border-color:var(--wa);color:#06210f;transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(37,211,102,.5);} .btn-sm{padding:10px 18px;font-size:13px;} /* ---------- LOGO ---------- */ .mark-badge{ width:36px;height:36px;border-radius:9px; background:linear-gradient(155deg, var(--accent), var(--accent-dark)); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background .3s ease; } .mark-badge svg{width:17px;height:17px;} /* ---------- NAV ---------- */ header.site{ position:sticky; top:0; z-index:50; background:rgba(var(--overlay-rgb),.78); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;} .brand .word{font-family:'IBM Plex Mono', monospace;font-weight:500;font-size:14.5px;letter-spacing:.06em;color:var(--fg-strong);text-transform:uppercase;} .brand .word b{color:var(--accent);transition:color .3s ease;} nav.links{display:flex;gap:28px;font-size:14px;} nav.links a{text-decoration:none;color:var(--muted);font-weight:500;position:relative;padding-bottom:3px;} nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .25s ease;} nav.links a:hover{color:var(--fg-strong);} nav.links a:hover::after{width:100%;} nav.links a.active{color:var(--fg-strong);} nav.links a.active::after{width:100%;} .nav-right{display:flex;align-items:center;gap:14px;} .nav-legal{display:flex;align-items:center;gap:8px;padding-right:14px;margin-right:2px;border-right:1px solid var(--border);} .nav-legal a{ font-family:'IBM Plex Mono', monospace;font-size:11.5px;font-weight:600;letter-spacing:.01em; color:var(--muted);text-decoration:none;padding:6px 11px;border:1px solid var(--border-hi); border-radius:99px;transition:color .2s ease,border-color .2s ease,background .2s ease;white-space:nowrap; } .nav-legal a:hover{color:var(--accent);border-color:var(--accent);} .nav-mobile-hide{display:flex;} .nav-icon-btn{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:99px;border:1px solid var(--border-hi); color:var(--muted);transition:border-color .2s ease, color .2s ease, transform .2s ease; flex-shrink:0; } .nav-icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);} .nav-icon-btn svg{width:17px;height:17px;} .nav-icon-btn.wa{color:var(--wa);border-color:rgba(37,211,102,.35);} .nav-icon-btn.wa:hover{border-color:var(--wa);color:var(--wa);} .theme-toggle{background:transparent;padding:0;font:inherit;} .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-sun{display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:block;} .menu-toggle{ display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border-hi); background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px; } .menu-toggle span{width:16px;height:1.5px;background:var(--fg-strong);transition:transform .25s ease, opacity .2s ease;} .menu-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);} .menu-toggle.open span:nth-child(2){opacity:0;} .menu-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);} .mobile-menu{ display:none;position:fixed;inset:65px 0 0 0;z-index:45; background:rgba(var(--overlay-rgb),.98);backdrop-filter:blur(10px); padding:32px 28px;overflow-y:auto; } .mobile-menu.open{display:block;} .mobile-menu nav{display:flex;flex-direction:column;gap:4px;margin-bottom:28px;} .mobile-menu nav a{ text-decoration:none;color:var(--fg-strong);font-family:'Fraunces',serif;font-weight:560;font-size:26px; padding:14px 4px;border-bottom:1px solid var(--border); } .mobile-menu nav a.active{color:var(--accent);} .mobile-menu .cta-stack{display:flex;flex-direction:column;gap:12px;} .mobile-menu .cta-stack .btn{width:100%;justify-content:center;} .mobile-menu .legal-links{ display:flex;gap:12px;justify-content:center;margin-top:24px;padding-top:20px; border-top:1px solid var(--border); } .mobile-menu .legal-links a{ font-family:'IBM Plex Mono', monospace;font-size:13px;font-weight:700;color:var(--fg-strong); text-decoration:none;padding:9px 16px;border:1px solid var(--border-hi);border-radius:99px; transition:color .2s ease,border-color .2s ease; } .mobile-menu .legal-links a:hover{color:var(--accent);border-color:var(--accent);} @media(max-width:900px){ .nav-mobile-hide{display:none;} .menu-toggle{display:flex;} } /* ---------- HERO: ambient gradient blobs (pure CSS, GPU-only, always smooth) ---------- */ .hero{position:relative;padding:120px 0 90px;overflow:hidden;} .blob{ position:absolute;border-radius:50%;filter:blur(60px); background:radial-gradient(circle, var(--accent-glow), transparent 70%); will-change:transform;pointer-events:none; } .blob-a{width:520px;height:520px;top:-180px;left:-120px;animation:drift1 22s ease-in-out infinite;} .blob-b{width:420px;height:420px;top:60px;right:-140px;animation:drift2 26s ease-in-out infinite;} .blob-c{width:360px;height:360px;bottom:-200px;left:38%;animation:drift3 19s ease-in-out infinite;} @keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,40px) scale(1.12);} } @keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,50px) scale(0.9);} } @keyframes drift3{ 0%,100%{transform:translate(-50%,0) scale(1);} 50%{transform:translate(-50%,-40px) scale(1.15);} } .hero-inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto;} .hero h1{ font-size:clamp(32px, 5vw, 58px); line-height:1.1; margin-top:22px; } .hero h1 .word{display:inline-block;opacity:0;transform:translateY(18px);animation:wordUp .7s cubic-bezier(.2,.7,.2,1) forwards;} @keyframes wordUp{ to{ opacity:1; transform:translateY(0); } } .hero .sub{ margin:22px auto 0;font-size:17.5px;color:var(--muted);max-width:56ch; opacity:0;animation:fadeUp .8s ease .5s forwards; } @keyframes fadeUp{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} } .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fadeUp .8s ease .68s forwards;} .hero-meta{margin-top:28px;font-family:'IBM Plex Mono', monospace;font-size:12.5px;color:var(--muted-lo);opacity:0;animation:fadeUp .8s ease .82s forwards;} .hero-meta b{color:var(--accent);transition:color .3s ease;} .stat-chips{ position:relative;z-index:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap; margin-top:52px;opacity:0;animation:fadeUp .8s ease .96s forwards; } .stat-chip{ display:flex;align-items:baseline;gap:9px; background:var(--card);border:1px solid var(--border-hi);border-radius:99px; padding:11px 20px;transition:border-color .2s ease, transform .2s ease; } .stat-chip:hover{border-color:var(--accent);transform:translateY(-2px);} .stat-chip b{font-family:'Fraunces', serif;font-weight:650;font-size:18px;color:var(--fg-strong);} .stat-chip span{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono', monospace;} /* ---------- PAGE HEADER (for subpages) ---------- */ .page-header{position:relative;padding:150px 0 80px;overflow:hidden;text-align:center;} .page-header .wrap{position:relative;z-index:1;} .page-header h1{font-size:clamp(32px,5vw,54px);margin-top:18px;max-width:18ch;margin-left:auto;margin-right:auto;line-height:1.12;} .page-header p{margin:18px auto 0;color:var(--muted);font-size:16.5px;max-width:56ch;} /* ---------- LEGAL PAGES (Impressum / Datenschutz) ---------- */ .legal{max-width:740px;margin:0 auto;padding:56px 28px 110px;} @media(max-width:560px){ .legal{padding:44px 22px 90px;} } .legal h2{font-size:20px;margin-top:48px;margin-bottom:14px;} .legal h2:first-child{margin-top:0;} .legal p{color:var(--muted);font-size:15px;line-height:1.7;margin-top:12px;} .legal p:first-of-type{margin-top:0;} .legal a{color:var(--accent);} .legal ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;} .legal li{color:var(--muted);font-size:15px;line-height:1.6;padding-left:18px;position:relative;} .legal li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:2px;background:var(--accent);} .legal strong{color:var(--fg-strong);} /* ---------- HORIZONTAL PINNED SCROLL (single transform, GPU-only, rAF-throttled) ---------- */ .hscroll{height:300vh;position:relative;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .hscroll-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;} .hscroll-track{display:flex;gap:32px;padding:0 8vw;will-change:transform;} .hpanel{ flex:0 0 min(560px,78vw);background:var(--card);border:1px solid var(--border-hi);border-radius:24px; padding:52px 44px;position:relative; } .hpanel.hp-final{border-color:var(--accent);} .hp-eyebrow{font-family:'IBM Plex Mono', monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-lo);} .hp-num{font-family:'Fraunces', serif;font-weight:650;font-size:clamp(56px,8vw,108px);line-height:1;margin-top:18px;color:var(--fg-strong);} .hp-num.accent{color:var(--accent);} .hpanel p{margin-top:22px;color:var(--muted);font-size:16px;max-width:40ch;line-height:1.55;} @media(max-width:760px){ .hscroll{height:220vh;} .hpanel{padding:38px 30px;} } @media (prefers-reduced-motion: reduce){ .hscroll{height:auto;} .hscroll-pin{position:static;height:auto;padding:60px 0;} .hscroll-track{flex-wrap:wrap;transform:none !important;} } /* ---------- SECTION HEAD ---------- */ .section{padding:92px 0;} .section-head{max-width:640px;margin:0 auto 48px;text-align:center;} .section-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:16px;line-height:1.15;} .section-head h2 .accent{font-style:italic;} .section-head p{margin-top:16px;color:var(--muted);font-size:16px;} .section-head.left{margin-left:0;text-align:left;} /* ---------- TRUST STRIP ---------- */ .trust{padding:56px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt);} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:16px;overflow:hidden;border:1px solid var(--border);} .trust-item{background:var(--card);padding:22px 20px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;} .trust-item svg{width:22px;height:22px;stroke:var(--accent);} .trust-item b{font-size:13.5px;color:var(--fg-strong);font-weight:600;} .trust-item span{font-size:12px;color:var(--muted-lo);} @media(max-width:900px){ .trust-grid{grid-template-columns:1fr 1fr;} } @media(max-width:560px){ .trust-grid{grid-template-columns:1fr;} } /* ---------- SERVICES ---------- */ /* These are static section labels, not clickable tabs. Deliberately NOT pill/border-shaped like .btn — a flat underline mark instead, so they don't read as buttons that do nothing when clicked. */ .track-tabs{display:flex;justify-content:center;gap:28px;margin-bottom:44px;flex-wrap:wrap;} .track-label{ font-family:'IBM Plex Mono', monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase; padding:0 0 10px;border-bottom:2px solid transparent;color:var(--muted-lo); } .track-label.accent-bg{background:none;border-bottom-color:var(--accent);color:var(--accent);} .track-heading{display:flex;align-items:center;gap:14px;margin:0 0 28px;} .track-heading .num{font-family:'IBM Plex Mono', monospace;color:var(--accent);font-size:13px;} .track-heading h3{font-size:24px;} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden;} .svc-card{background:var(--card);padding:32px 28px;transition:background .2s, transform .2s;position:relative;} .svc-card:hover{background:var(--card-hi);transform:translateY(-3px);z-index:1;} .svc-icon{ width:42px;height:42px;border-radius:10px; background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); display:flex;align-items:center;justify-content:center;margin-bottom:20px; transition:transform .25s ease, background .3s ease, border-color .3s ease; } .svc-card:hover .svc-icon{transform:scale(1.1) rotate(-6deg);} .svc-icon svg{width:20px;height:20px;stroke:var(--accent);transition:stroke .3s ease;} .svc-card h3{font-size:17.5px;margin-bottom:9px;} .svc-card h4{font-size:17.5px;margin-bottom:9px;font-family:'Fraunces',serif;font-weight:600;color:var(--fg-strong);} .svc-card p{color:var(--muted);font-size:14px;} .svc-card ul{margin-top:14px;display:flex;flex-direction:column;gap:7px;} .svc-card li{font-size:13px;color:var(--muted);padding-left:16px;position:relative;} .svc-card li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:2px;background:var(--accent);} .svc-section{margin-bottom:80px;} .svc-section:last-child{margin-bottom:0;} @media(max-width:900px){ .svc-grid{grid-template-columns:1fr 1fr;} } @media(max-width:620px){ .svc-grid{grid-template-columns:1fr;} } /* ---------- ADD-ONS (Zusatzleistungen) ---------- */ /* Was a plain hairline .svc-grid — visually identical to the core-services grid above it on the same page, so it read as "more of the same" and got skipped. Dashed accent borders + a "+ dazubuchbar" badge mark these clearly as separate, optional extras rather than core package content. */ .addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .addon-card{ position:relative;background:var(--card);border:1.5px dashed var(--border-hi); border-radius:16px;padding:30px 24px 24px; transition:border-color .2s ease, border-style .2s ease, background .2s ease, transform .2s ease; } .addon-card:hover{border-color:var(--accent);border-style:solid;background:var(--card-hi);transform:translateY(-4px);} .addon-badge{ position:absolute;top:-12px;right:20px;background:var(--accent);color:#fff; font-family:'IBM Plex Mono', monospace;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:4px 11px;border-radius:99px;white-space:nowrap; } .addon-card h3{font-size:16.5px;margin-bottom:8px;} .addon-card p{color:var(--muted);font-size:13.5px;} @media(max-width:900px){ .addon-grid{grid-template-columns:1fr 1fr;} } @media(max-width:620px){ .addon-grid{grid-template-columns:1fr;} } /* ---------- PROCESS ---------- */ .process-list{max-width:760px;margin:0 auto;} .proc-row{ display:grid;grid-template-columns:60px 1fr;gap:26px; padding:26px 0;border-top:1px solid var(--border); transition:padding-left .2s ease; } .proc-row:hover{padding-left:8px;} .proc-row:last-child{border-bottom:1px solid var(--border);} .proc-num{font-family:'Fraunces', serif;font-weight:600;font-size:22px;color:var(--accent);transition:color .3s ease;} .proc-row h4{font-size:17px;margin-bottom:6px;} .proc-row p{font-size:14.5px;color:var(--muted);} /* ---------- PROBLEM GRID ---------- */ .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .problem-card{ background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 24px; transition:transform .2s ease, border-color .2s ease; } .problem-card:hover{transform:translateY(-4px);border-color:var(--border-hi);} .problem-icon{width:38px;height:38px;border-radius:10px;background:rgba(224,90,90,.1);border:1px solid rgba(224,90,90,.28);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .problem-icon svg{width:18px;height:18px;stroke:var(--bad);} .problem-card h3{font-size:16px;margin-bottom:6px;} .problem-card p{font-size:13.5px;color:var(--muted);} @media(max-width:900px){ .problem-grid{grid-template-columns:1fr 1fr;} } @media(max-width:620px){ .problem-grid{grid-template-columns:1fr;} } .problem-cta{text-align:center;margin-top:44px;} .problem-cta p{color:var(--muted);margin-bottom:20px;font-size:15px;} /* ---------- GROWTH CHART (reveal-on-scroll, pure CSS transitions — smooth by construction) ---------- */ .growth{ background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05), transparent 60%), var(--bg-alt); border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:100px 0;overflow:hidden;position:relative; } .growth-chart{width:100%;max-width:1400px;margin:56px auto 0;position:relative;} .growth-chart svg{width:100%;height:auto;display:block;overflow:visible;} .gc-grid line{stroke:var(--chart-grid);} .gc-baseline{stroke:var(--chart-baseline);} .gc-break{stroke:var(--muted-lo);stroke-dasharray:6 6;} .gc-bar{ fill:url(#barGrad);opacity:0;transform:scaleY(0);transform-box:fill-box;transform-origin:bottom; transition:opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .gc-line{ fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:100;stroke-dashoffset:100;pathLength:100; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .3s, stroke .4s ease; } .gc-dot{fill:var(--accent);opacity:0;transition:opacity .4s ease;transition-delay:1.4s;} .gc-peak{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent));} .growth-chart.in-view .gc-bar{opacity:1;transform:scaleY(1);} .growth-chart.in-view .gc-bar:nth-of-type(1){transition-delay:.05s;} .growth-chart.in-view .gc-bar:nth-of-type(2){transition-delay:.2s;} .growth-chart.in-view .gc-bar:nth-of-type(3){transition-delay:.35s;} .growth-chart.in-view .gc-bar:nth-of-type(4){transition-delay:.5s;} .growth-chart.in-view .gc-bar:nth-of-type(5){transition-delay:.65s;} .growth-chart.in-view .gc-line{stroke-dashoffset:0;} .growth-chart.in-view .gc-dot{opacity:1;} .gc-label{font-family:'IBM Plex Mono', monospace;font-size:11px;fill:var(--muted-lo);} .gc-value{font-family:'Fraunces', serif;font-weight:600;font-size:17px;fill:var(--fg-strong);} .gc-break-label{font-family:'IBM Plex Mono', monospace;font-size:10.5px;fill:var(--muted-lo);} @keyframes pulseDot{ 0%{r:6;opacity:1;} 50%{r:11;opacity:.25;} 100%{r:6;opacity:1;} } .gc-pulse{animation:pulseDot 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;} .growth-note{text-align:center;margin-top:36px;font-size:13px;color:var(--muted-lo);max-width:62ch;margin-left:auto;margin-right:auto;} /* ---------- RESULTS ---------- */ /* the three proof numbers used to sit in three identical bordered cards — same shape/weight as the service and package grids above it, which is part of why the page reads as "everything looks the same". The turnaround factor is the single strongest number on the page, so it gets its own larger, highlighted block; the other two stay as a compact pair beside it instead of a third look-alike card. */ .results-feature{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:stretch;} .result-hero{ background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 20%, var(--card)), var(--card) 65%); border:1px solid var(--accent);border-radius:20px;padding:36px 32px; display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden; } .result-hero::before{ content:"";position:absolute;top:-40%;right:-30%;width:70%;height:140%; background:radial-gradient(circle, var(--accent-glow), transparent 70%);pointer-events:none; } .result-hero .rh-label{font-family:'IBM Plex Mono', monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-lo);position:relative;} .result-hero .rh-num{font-family:'Fraunces', serif;font-weight:650;font-size:clamp(58px,7vw,92px);line-height:1;margin-top:14px;color:var(--fg-strong);position:relative;} .result-hero .rh-num .accent{font-size:.5em;vertical-align:top;} .result-hero p{margin-top:16px;color:var(--muted);font-size:14px;max-width:30ch;position:relative;} .results-grid{display:flex;flex-direction:column;gap:20px;} .result-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 26px 22px;transition:transform .2s ease, border-color .2s ease;} .result-card:hover{transform:translateY(-4px);border-color:var(--accent);} .result-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;} .result-card h3{font-size:15.5px;font-family:'IBM Plex Mono', monospace;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em;} .result-card .delta{font-family:'IBM Plex Mono', monospace;font-size:12.5px;background:rgba(63,191,138,.12);color:var(--ok);border:1px solid rgba(63,191,138,.3);padding:4px 10px;border-radius:99px;} .result-bars{display:flex;gap:14px;} .result-bar{flex:1;} .result-bar .l{font-size:12px;color:var(--muted-lo);margin-bottom:8px;} .result-bar .v{font-family:'Fraunces', serif;font-weight:600;font-size:26px;color:var(--fg-strong);} .result-bar.before .v{color:var(--muted);} .result-note{margin-top:28px;font-size:13px;color:var(--muted-lo);text-align:center;max-width:56ch;margin-left:auto;margin-right:auto;} @media(max-width:900px){ .results-feature{grid-template-columns:1fr;} } /* ---------- PRINCIPLE QUOTE ---------- */ .principle-card{ max-width:820px;margin:0 auto; background:var(--card);border:1px solid var(--border-hi);border-radius:22px; padding:52px 48px;text-align:center;position:relative;transition:border-color .3s ease; } .principle-card:hover{border-color:var(--accent);} .principle-card .qmark{font-family:'Fraunces',serif;font-size:64px;color:var(--accent);opacity:.5;line-height:.5;display:block;margin-bottom:10px;transition:color .3s ease;} .principle-card blockquote{ font-family:'Fraunces', serif;font-weight:500;font-style:italic; font-size:clamp(20px,2.6vw,27px);line-height:1.45;color:var(--fg-strong);margin:0; } .principle-card .attrib{margin-top:24px;font-family:'IBM Plex Mono', monospace;font-size:12.5px;color:var(--muted-lo);} @media(max-width:640px){ .principle-card{padding:38px 26px;} } /* ---------- CLIENT BADGES ---------- */ .client-badges-wrap{text-align:center;margin-top:36px;} .client-badges-label{ font-family:'IBM Plex Mono', monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-lo);margin-bottom:14px; } .client-badges{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;} .client-name{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--muted);transition:color .2s ease;} .client-name:hover{color:var(--fg-strong);} /* ---------- ABOUT / PHOTO ---------- */ .about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center;} .about-photo-wrap{position:relative;} .about-photo{ border-radius:22px;overflow:hidden;border:1px solid var(--border-hi); box-shadow:0 40px 80px -40px rgba(0,0,0,.6);position:relative; } .about-photo img{width:100%;display:block;object-fit:cover;aspect-ratio:3/4;} .about-photo-badge{ position:absolute;bottom:18px;left:18px;background:rgba(var(--overlay-rgb),.85);backdrop-filter:blur(6px); border:1px solid var(--border-hi);border-radius:14px;padding:12px 16px; } .about-photo-badge b{display:block;font-family:'Fraunces',serif;font-size:15px;color:var(--fg-strong);} .about-photo-badge span{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono', monospace;} .about-copy h2{font-size:clamp(26px,3.4vw,38px);line-height:1.16;} .about-copy p{margin-top:18px;color:var(--muted);font-size:16px;line-height:1.65;} .about-facts{margin-top:32px;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;} .about-fact{background:var(--card);padding:18px 20px;} .about-fact b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--fg-strong);margin-bottom:4px;} .about-fact span{font-size:13.5px;color:var(--muted);} @media(max-width:860px){ .about-grid{grid-template-columns:1fr;} .about-photo{max-width:340px;margin:0 auto;} } /* ---------- PACKAGES ---------- */ /* flexbox + justify-content:center instead of a fixed grid: the homepage teaser reuses this with only 3 cards, and a fixed-column grid either left an empty slot (pushing cards left) or, with auto-fit, left an odd last card stuck at the left edge of its row. Flex-wrap + center handles any card count gracefully, including an uneven last row. */ .pkg-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;align-items:stretch;} .pkg-card{ flex:1 1 230px;max-width:300px; background:var(--card);border:1px solid var(--border-hi);border-radius:22px;padding:30px 24px; display:flex;flex-direction:column;transition:transform .2s ease, border-color .2s ease;position:relative; } .pkg-card:hover{transform:translateY(-5px);} .pkg-card.featured{border-color:var(--accent);background:var(--card-hi);} /* premium tier — a touch more presence than the others, but kept calm (no aggressive glow) so it reads as "more individual", not "expensive". */ .pkg-card.premium{ border-color:var(--accent); background:var(--card-hi); } .pkg-badge{ position:absolute;top:-13px;left:26px;background:var(--accent);color:#fff; font-family:'IBM Plex Mono', monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:5px 14px;border-radius:99px; } .pkg-name{font-family:'IBM Plex Mono', monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);} .pkg-title{font-size:24px;margin-top:10px;} .pkg-desc{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.55;} .pkg-price{margin-top:22px;font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--fg-strong);} .pkg-price span{display:block;font-family:'IBM Plex Mono', monospace;font-size:11.5px;color:var(--muted-lo);font-weight:400;margin-top:4px;text-transform:none;letter-spacing:0;} .pkg-list{margin-top:22px;display:flex;flex-direction:column;gap:10px;flex:1;} .pkg-list li{font-size:13.5px;color:var(--muted);padding-left:22px;position:relative;line-height:1.4;} .pkg-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:600;} .pkg-card .btn{margin-top:26px;justify-content:center;} .pkg-swipe-hint{ display:none;align-items:center;justify-content:center;gap:8px; text-align:center;margin-bottom:18px; font-family:'IBM Plex Mono', monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--accent); } /* on phones, four full-width stacked cards made this section feel endless. A horizontal, snapping carousel keeps each card readable at close to full size while signalling "more to see" via a visible peek of the next card, instead of one long vertical stack. */ @media(max-width:760px){ .pkg-swipe-hint{display:flex;} .pkg-grid{ display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:flex-start;align-items:stretch; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:14px;margin:0 -20px;padding:20px 20px 12px; scrollbar-width:none; } .pkg-grid::-webkit-scrollbar{display:none;} .pkg-card{flex:0 0 80vw;max-width:320px;scroll-snap-align:center;} } @media(max-width:420px){ .pkg-card{flex:0 0 84vw;} } /* ---------- FAQ ---------- */ .faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px;} .faq-item{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s ease;} .faq-item:hover{border-color:var(--border-hi);} .faq-item summary{ padding:20px 24px;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--fg-strong); display:flex;justify-content:space-between;align-items:center;list-style:none; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+";font-family:'IBM Plex Mono', monospace;color:var(--accent);font-size:20px;transition:transform .25s ease, color .3s ease;} .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item .a{padding:0 24px 22px;color:var(--muted);font-size:14.5px;max-width:60ch;} /* ---------- FINAL CTA ---------- */ .final-cta{text-align:center;padding:96px 0;position:relative;overflow:hidden;} .final-cta .blob{opacity:.7;} .final-cta .wrap{position:relative;z-index:1;} .final-cta h2{font-size:clamp(30px,4.6vw,50px);max-width:18ch;margin:18px auto 0;line-height:1.12;} .final-cta p{margin:20px auto 0;color:var(--muted);max-width:48ch;font-size:16.5px;} .final-cta .hero-cta{margin-top:34px;opacity:1;animation:none;} .final-badges{display:flex;justify-content:center;gap:28px;margin-top:34px;flex-wrap:wrap;} .final-badges span{font-size:13px;color:var(--muted-lo);font-family:'IBM Plex Mono', monospace;display:flex;align-items:center;gap:7px;} .final-badges span::before{content:"✓";color:var(--ok);} /* ---------- CONTACT SPLIT: direct CTAs + qualification form ---------- */ .contact-split{ display:grid;grid-template-columns:1fr 1fr;gap:48px; margin-top:56px;text-align:left;align-items:start; } .contact-direct{padding-top:8px;} .contact-form{ background:var(--card);border:1px solid var(--border-hi);border-radius:20px; padding:28px 26px;display:flex;flex-direction:column;gap:14px; text-align:left; } .contact-form-hint{color:var(--muted);font-size:14.5px;margin:0 0 4px;} .contact-form .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .contact-form .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .contact-form label{ display:flex;flex-direction:column;gap:6px; font-size:13px;color:var(--muted);font-family:'IBM Plex Mono', monospace;letter-spacing:.02em; } .contact-form input, .contact-form select, .contact-form textarea{ font-family:'IBM Plex Sans', sans-serif;font-size:15px;color:var(--text); background:var(--bg);border:1px solid var(--border);border-radius:10px; padding:11px 13px;outline:none;transition:border-color .2s ease;resize:vertical; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{border-color:var(--accent);} .contact-form-legal{font-size:12px;color:var(--muted-lo);margin:0;} .contact-form-legal a{color:var(--accent);text-decoration:underline;} @media (max-width:860px){ .contact-split{grid-template-columns:1fr;gap:36px;} .contact-form .cf-row{grid-template-columns:1fr;} } /* ---------- STICKY MOBILE CONTACT BAR ---------- */ /* Previously two 1px-gap flex items on a var(--border) background — at in-between viewport widths the rounding of flex:1 widths left visible background slivers ("Lücken") between the buttons. Fixed by rendering both as solid, unmistakably-tappable pill buttons on a single opaque bar, with a real gap sized in px (not a background-bleed hack) and safe-area padding for iOS home-indicator devices. */ .sticky-contact{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:44; gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0)); background:var(--bg-alt);border-top:1px solid var(--border-hi); box-shadow:0 -14px 30px -12px rgba(0,0,0,.55); } .sticky-contact a{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:13px 10px;border-radius:12px;text-decoration:none; font-family:'IBM Plex Sans', sans-serif;font-weight:700;font-size:13.5px; transition:transform .15s ease; } .sticky-contact a:active{transform:scale(.96);} .sticky-contact a svg{width:16px;height:16px;flex-shrink:0;} .sticky-contact a.call{background:var(--accent);color:#fff;} .sticky-contact a.wa{background:var(--wa);color:#06210f;} @media(max-width:760px){ .sticky-contact{display:flex;} body{padding-bottom:74px;} } /* ---------- COOKIE BANNER ---------- */ .cookie-banner{ display:none;position:fixed;left:20px;right:20px;bottom:20px;z-index:60; max-width:560px;margin:0 auto; background:var(--card);border:1px solid var(--border-hi);border-radius:18px; padding:22px 24px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6); } .cookie-banner.show{display:block;} .cookie-banner p{font-size:13.5px;color:var(--muted);line-height:1.55;} .cookie-banner p a{color:var(--accent);text-decoration:underline;} .cookie-banner .row{display:flex;justify-content:flex-end;margin-top:16px;} @media(max-width:600px){ .cookie-banner{left:12px;right:12px;bottom:12px;padding:18px 18px;} } @media(max-width:760px){ .cookie-banner{bottom:76px;} } /* ---------- FOOTER ---------- */ footer.site{background:var(--bg-alt);border-top:1px solid var(--border);padding:56px 0 26px;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--border);} .foot-brand .brand{margin-bottom:14px;} .foot-brand p{font-size:13.5px;color:var(--muted-lo);max-width:32ch;} /* a horizontal icon row reads as one compact, deliberate unit — the old three stacked full-text links (phone/WhatsApp/mail each on their own line) were the single biggest contributor to footer height on mobile. */ .foot-contact{margin-top:18px;display:flex;align-items:center;gap:10px;} .foot-contact a{ display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:99px; border:1px solid var(--border-hi);color:var(--muted); transition:border-color .2s ease, color .2s ease, transform .2s ease; } .foot-contact a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);} .foot-contact svg{width:15px;height:15px;flex-shrink:0;} .foot-contact .txt{display:none;} .foot-col h5{font-family:'IBM Plex Mono', monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-lo);margin-bottom:14px;font-weight:500;} .foot-col ul{display:flex;flex-direction:column;gap:9px;} .foot-col a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s ease;} .foot-col a:hover{color:var(--accent);} .foot-bottom{ padding-top:20px;display:flex;flex-wrap:wrap; justify-content:center;align-items:center;gap:8px 18px;text-align:center; font-size:12px;color:var(--muted-lo);font-family:'IBM Plex Mono', monospace; } .foot-legal a{text-decoration:none;color:var(--fg-strong);font-weight:700;} .foot-legal a:hover{color:var(--accent);} @media(min-width:561px){ .foot-bottom{justify-content:space-between;} } @media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} } /* the three link columns used to stack fully under the brand block — four sections tall on a phone. Brand spans the full width and the three link groups now sit side by side underneath, cutting the footer height roughly in half. */ @media(max-width:560px){ .foot-grid{grid-template-columns:repeat(3,1fr);gap:26px 12px;} .foot-brand{grid-column:1/-1;} .foot-col h5{font-size:10.5px;margin-bottom:11px;} .foot-col ul{gap:8px;} .foot-col a{font-size:12.5px;} } @media(max-width:380px){ .foot-grid{grid-template-columns:1fr 1fr;} } /* ---------- CASE STUDY: TIMELINE, PROOF GALLERY, CALLOUT ---------- */ .cs-timeline{max-width:780px;margin:0 auto;border-left:2px solid var(--border-hi);} .cs-step{position:relative;padding:0 0 40px 34px;} .cs-step:last-child{padding-bottom:0;} .cs-step::before{ content:"";position:absolute;left:-8px;top:3px;width:13px;height:13px;border-radius:50%; background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--accent); } .cs-step .step-label{font-family:'IBM Plex Mono', monospace;font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;} .cs-step h4{font-size:18px;margin-top:8px;} .cs-step p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:60ch;} .proof-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:56px;} .proof-item{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .2s ease, border-color .2s ease;} .proof-item:hover{transform:translateY(-4px);border-color:var(--border-hi);} .proof-item img{width:100%;display:block;object-fit:cover;object-position:top;height:280px;} .proof-item .cap{padding:14px 16px;} .proof-item .cap b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:14.5px;color:var(--fg-strong);margin-bottom:3px;} .proof-item .cap span{font-size:12px;color:var(--muted);} .proof-wide{grid-column:1/-1;} .proof-wide img{height:360px;} @media(max-width:760px){ .proof-grid{grid-template-columns:1fr;} .proof-item img{height:220px;} .proof-wide img{height:260px;} } .callout-box{background:var(--card-hi);border:1px solid var(--border-hi);border-radius:16px;padding:24px 26px;margin-top:40px;font-size:14.5px;color:var(--muted);line-height:1.65;} .callout-box b{color:var(--fg-strong);} @media (prefers-reduced-motion: reduce){ .blob{animation:none !important;} .hero h1 .word, .hero .sub, .hero-cta, .hero-meta, .stat-chips{animation:none !important;opacity:1 !important;transform:none !important;} .gc-bar, .gc-line, .gc-dot{transition:none !important;} } /* ========================================================================= MOBILE REFINEMENTS — additive only, desktop layout/rules above unchanged. ========================================================================= */ /* FIX: ".nav-mobile-hide{display:none}" was losing the cascade to more specific/later rules (nav.links), so the full desktop nav never actually hid on phones — that's what made the whole page scrollable sideways. Force it with higher specificity + !important, scoped to the same breakpoint as before. Desktop (>900px) untouched. */ @media(max-width:900px){ header.site .nav-mobile-hide{display:none !important;} } /* two-track service grid on the homepage (was an inline style before) */ .svc-grid-2col{grid-template-columns:1fr 1fr;} @media(max-width:620px){ .svc-grid-2col{grid-template-columns:1fr;} } /* growth-chart SVG text was shrinking to unreadable size on narrow screens because the whole viewBox scales down with the container width. Give it a readable minimum width, bump the in-chart text a bit to compensate for the smaller scale, and add an edge fade + clearer hint so the extra content to the right reads as "swipe for more" instead of "cut off". */ .chart-swipe-hint{display:none;} /* Below 700px the SVG chart's text used to shrink into illegibility with the container, so it was forced to a fixed min-width and left to horizontal-scroll instead — that "komisches Wischen" is gone now. On phones we hide the SVG entirely and show .growth-list: the same five data points as plain, full-width rows with a proportional bar, nothing to scroll. */ .growth-list{display:none;} @media(max-width:700px){ .growth-chart{display:none;} .growth-list{ display:flex;flex-direction:column;gap:16px;margin-top:40px; } .growth-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; background:var(--card);border:1px solid var(--border);border-radius:14px; padding:16px 18px; } .growth-row.gr-peak{border-color:var(--accent);} .gr-label{font-size:13px;color:var(--muted);} .gr-bar-wrap{flex:1;margin:0 14px;height:8px;border-radius:99px;background:var(--border);overflow:hidden;} .gr-bar{display:block;height:100%;border-radius:99px;background:var(--accent);} .gr-value{font-family:'Fraunces', serif;font-weight:650;font-size:20px;color:var(--fg-strong);flex-shrink:0;min-width:44px;text-align:right;} .growth-row.gr-peak .gr-value{color:var(--accent);} } /* blurred, continuously-animating hero blobs are expensive to repaint on mobile GPUs and were the main source of scroll/animation jank — freeze them and cut the blur radius on small screens. Desktop keeps the full animated version. */ @media(max-width:760px){ .blob{animation:none !important;filter:blur(38px);opacity:.6;} header.site{backdrop-filter:none;background:rgba(var(--overlay-rgb),.94);} } @media(max-width:760px){ /* less empty top/bottom air on small screens */ .hero{padding:96px 0 56px;} .page-header{padding:120px 0 56px;} .section{padding:64px 0;} .growth{padding:64px 0;} .final-cta{padding:72px 0;} .section-head{margin-bottom:38px;} /* horizontal pinned-scroll panels: keep the same pin/scroll technique as desktop, just size the cards and text so they actually fit a phone. */ .hscroll-track{padding:0 6vw;gap:18px;} .hpanel{flex:0 0 84vw;padding:32px 26px;} .hp-num{font-size:clamp(42px,15vw,64px);} .hpanel p{font-size:14.5px;} /* mobile menu sits directly under the actual header height */ .mobile-menu{inset:72px 0 0 0;} /* a touch more breathing room above the sticky contact bar */ body{padding-bottom:60px;} .cs-step{padding-left:26px;} .cs-step::before{left:-7px;} .pkg-card{padding:30px 24px;} .about-copy{text-align:left;} /* less crowded cards/text on phones — smaller type + tighter padding, same content and hierarchy as desktop. */ .hero .sub{font-size:15px;line-height:1.55;} .section-head p{font-size:14.5px;} .svc-card{padding:26px 22px;} .svc-card p{font-size:13.5px;} .result-card{padding:22px 22px 20px;} .result-bar .v{font-size:22px;} .principle-card blockquote{font-size:19px;} .principle-card{padding:34px 24px;} .trust-item{padding:18px 16px;} .proof-item .cap{padding:12px 14px;} .callout-box{padding:20px 20px;font-size:14px;} } @media(max-width:420px){ .hero h1{font-size:28px;} .page-header h1{font-size:26px;} .stat-chip{padding:9px 14px;} .stat-chip b{font-size:16px;} .pill{padding:6px 13px;font-size:11px;} .pkg-title{font-size:22px;} .pkg-desc{font-size:13.5px;} }