/* ============================================================ Clipova Studio — shared stylesheet Light, quiet, typographic. One accent, hairline rules, almost no motion. Inter throughout. ============================================================ */ :root{ --paper: #FBFAF8; --paper-2: #F4F3EF; --ink: #14161A; --ink-2: #555C64; --ink-3: #8A9098; --rule: #E4E2DC; --rule-2: #D5D2CA; /* Brand teal, light-mode value from the app's asset catalog (#1A9BA5), darkened to #12727C so small text clears WCAG AA on paper. */ --accent: #12727C; --accent-dark: #0D5A62; --accent-tint: #ECF4F4; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* Eigene Display-Schrift fuer Ueberschriften. Inter allein liest sich als Default; Instrument Sans hat engere, eigenwilligere Formen und bleibt dabei in der Schweizer Grotesk-Linie. */ --head: 'Instrument Sans', 'Inter', -apple-system, sans-serif; --gutter: clamp(20px, 5vw, 64px); --maxw: 1180px; /* Schatten tragen den warmen Ton des Papiers, nicht neutrales Schwarz. */ --shadow-sm: 0 1px 2px rgba(48, 40, 30, .10); --shadow-lg: 0 14px 34px -14px rgba(48, 40, 30, .30); /* Statt willkuerlicher z-index-Zahlen im Code */ --z-nav: 50; --z-grain: 100; --z-skip: 200; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; overflow-x:clip; /* never `hidden` — that makes a scroll container */ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink-2); font-family:var(--font); font-size:16.5px; line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* height:auto ist Pflicht, sobald ein width/height-Attribute traegt: ohne sie wirkt das height-Attribut als CSS-Hoehe und ueberstimmt jedes aspect-ratio. Genau daran ist das Teamfoto 1440px hoch geworden. */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--head); color:var(--ink); font-weight:600; margin:0; letter-spacing:-.022em; line-height:1.12; /* verhindert einzelne Waisenwoerter auf der letzten Zeile */ text-wrap:balance; } h1{ font-size:clamp(31px, 3.7vw, 50px); letter-spacing:-.03em; line-height:1.06; } h2{ font-size:clamp(25px, 3vw, 38px); letter-spacing:-.028em; } h3{ font-size:clamp(17px, 1.5vw, 20px); } p{ margin:0; text-wrap:pretty; } /* Zahlen laufen in Tabellen und Preisen auf einer Achse */ .plan-price, .plan-month, .fact b, .cost, .price-notes, .legal table{ font-variant-numeric:tabular-nums; } /* ============================================================ TASTATUR-BEDIENUNG ============================================================ */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } /* Maus-Klicks sollen keinen Ring hinterlassen */ :focus:not(:focus-visible){ outline:none; } .skip{ position:absolute; left:var(--gutter); top:-100px; z-index:var(--z-skip); background:var(--ink); color:#fff; padding:11px 18px; border-radius:6px; font-size:14.5px; font-weight:500; transition:top .18s ease; } .skip:focus{ top:12px; } /* ============================================================ KORN — bricht die digitale Flaechigkeit, kaum sichtbar ============================================================ */ body::after{ content:''; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce){ body::after{ display:none; } } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } section{ padding:clamp(64px, 8vw, 116px) 0; border-top:1px solid var(--rule); } section.tinted{ background:var(--paper-2); } .label{ display:flex; align-items:baseline; gap:12px; font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px; } .label b{ color:var(--accent); font-weight:600; } .lede{ font-size:clamp(16.5px, 1.35vw, 19px); line-height:1.62; color:var(--ink-2); max-width:58ch; } /* two-column section heading */ .head2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(38px,5vw,62px); } @media(max-width:900px){ .head2{ grid-template-columns:1fr; gap:18px; } } .head2 h2{ max-width:15ch; } /* ============================================================ MOTION — one gesture, once. Nothing loops. ============================================================ */ .r{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--d,0) * 70ms); } .r.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.001ms !important; animation:none !important; } html{ scroll-behavior:auto; } .r{ opacity:1; transform:none; } } /* ============================================================ NAV ============================================================ */ .nav{ position:sticky; top:0; z-index:var(--z-nav); background:rgba(251,250,248,.88); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent; transition:border-color .25s ease; } .nav.stuck{ border-bottom-color:var(--rule); } .nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:62px; } /* Die Agentur heisst Clipova, die App heisst „Clipova Studio". Im Kopf steht darum die Bildmarke plus Agentur-Zusatz, nicht die Wortmarke der App. */ .brand{ display:flex; align-items:center; gap:11px; } .brand > img{ width:30px; height:30px; flex-shrink:0; } .brand-txt{ display:flex; flex-direction:column; line-height:1.15; gap:1px; } .brand b{ font-family:var(--head); font-weight:600; font-size:16.5px; color:var(--ink); letter-spacing:-.025em; } .brand-txt > span{ font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } @media(max-width:420px){ .brand > img{ width:26px; height:26px; } .brand b{ font-size:15px; } } .nav-links{ display:flex; gap:28px; font-size:14.5px; } .nav-links a{ color:var(--ink-2); transition:color .2s ease; } .nav-links a:hover{ color:var(--ink); } .nav-links a.here{ color:var(--ink); } @media(max-width:860px){ .nav-links{ display:none; } } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; font-family:inherit; padding:11px 20px; border-radius:6px; border:1px solid transparent; transition:background .2s ease, border-color .2s ease; cursor:pointer; } .btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-dark); } .btn-line{ border-color:var(--rule-2); color:var(--ink); background:transparent; } .btn-line:hover{ border-color:var(--ink); } .btn-sm{ padding:8px 15px; font-size:13.5px; } /* ============================================================ PHONE — plain hardware, no glow ============================================================ */ .phone{ --w:280px; width:var(--w); aspect-ratio:1320/2868; flex-shrink:0; padding:calc(var(--w) * .028); border-radius:calc(var(--w) * .15); background:#16181C; box-shadow:var(--shadow-sm), var(--shadow-lg); } .phone-screen{ width:100%; height:100%; overflow:hidden; position:relative; border-radius:calc(var(--w) * .125); background:#1B1E22; } .phone-screen img{ width:100%; height:100%; object-fit:cover; } /* ============================================================ HERO ============================================================ */ .hero{ border-top:0; padding-top:clamp(48px, 7vw, 92px); } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px, 6vw, 84px); align-items:center; } @media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } } .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:22px; } .eyebrow::before{ content:''; width:22px; height:1px; background:var(--accent); } .hero h1{ margin-bottom:22px; max-width:20ch; } .hero-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; align-items:center; } .hero-note{ margin-top:18px; font-size:14px; color:var(--ink-3); } .hero-phone{ display:flex; justify-content:center; } .hero-phone .phone{ --w:clamp(215px, 24vw, 272px); } /* page header for subpages */ .pagehead{ border-top:0; padding-top:clamp(44px,6vw,80px); padding-bottom:clamp(40px,5vw,64px); } .pagehead h1{ max-width:18ch; margin-bottom:20px; } /* ============================================================ FACTS ============================================================ */ .facts{ padding:0; border-top:1px solid var(--rule); } .facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); } @media(max-width:760px){ .facts-grid{ grid-template-columns:repeat(2,1fr); } } .fact{ padding:24px 0 24px 22px; border-left:1px solid var(--rule); } .fact:first-child{ border-left:0; padding-left:0; } @media(max-width:760px){ .fact:nth-child(odd){ border-left:0; padding-left:0; } .fact:nth-child(n+3){ border-top:1px solid var(--rule); } } .fact b{ display:block; color:var(--ink); font-weight:600; font-size:16px; margin-bottom:3px; } .fact small{ display:block; font-size:13.5px; color:var(--ink-3); line-height:1.5; } /* ============================================================ WER — Gesichter zuerst. Der Abschnitt war reiner Text; auf einer Agenturseite muss man die Leute sehen, die die Arbeit machen. ============================================================ */ .who{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(28px, 5vw, 68px); align-items:center; /* Zum Abstand kommt noch das padding-top der .svc-item dazu. Mit den urspruenglichen 76px standen optisch 102px darueber und nur 64px darunter; 46px gleichen den Rhythmus aus. */ margin-bottom:clamp(30px, 4vw, 46px); } @media(max-width:900px){ .who{ grid-template-columns:1fr; gap:30px; } } .who-photo{ position:relative; } .who-photo img{ aspect-ratio:4/3; object-fit:cover; } /* Namensschild im Bild — sagt sofort, wer da sitzt */ .who-tag{ position:absolute; left:0; bottom:0; background:var(--paper); color:var(--ink); font-size:13px; font-weight:500; padding:10px 16px; border-top:1px solid var(--rule); border-right:1px solid var(--rule); } .who-tag span{ color:var(--ink-3); } .who-body h2{ margin-bottom:18px; max-width:17ch; } .who-body .lede{ margin-bottom:4px; } /* ============================================================ LEISTUNGEN — was die Agentur uebernimmt ============================================================ */ .svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule); } @media(max-width:960px){ .svc{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .svc{ grid-template-columns:1fr; } } .svc-item{ padding:26px 24px 30px 0; border-left:1px solid var(--rule); padding-left:24px; } .svc-item:first-child{ border-left:0; padding-left:0; } @media(max-width:960px){ .svc-item:nth-child(odd){ border-left:0; padding-left:0; } .svc-item:nth-child(n+3){ border-top:1px solid var(--rule); } } @media(max-width:560px){ .svc-item{ border-left:0; padding-left:0; } .svc-item + .svc-item{ border-top:1px solid var(--rule); } } .svc-no{ font-family:var(--head); font-size:11.5px; font-weight:600; letter-spacing:.12em; color:var(--accent); margin-bottom:10px; font-variant-numeric:tabular-nums; } .svc-item h3{ font-size:17px; margin-bottom:7px; } .svc-item p{ font-size:14.5px; line-height:1.6; } /* Leichte Reaktion beim Ueberfahren — die Spalten wirkten sonst wie Papier */ .svc-item{ transition:background .25s ease; } .svc-item:hover{ background:rgba(18,114,124,.035); } /* Der Werkzeug-Hinweis unter den Leistungen — trennt Agentur von App. */ .svc-note{ margin-top:34px; padding:22px 24px; border-radius:6px; background:var(--accent-tint); border:1px solid rgba(18,114,124,.22); font-size:15.5px; line-height:1.62; color:var(--ink-2); max-width:74ch; } .svc-note strong{ color:var(--ink); font-weight:600; } /* ============================================================ AGENTUR ============================================================ */ .agency-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px, 5vw, 72px); align-items:start; } @media(max-width:900px){ .agency-grid{ grid-template-columns:1fr; gap:36px; } } .photo{ border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin:0; } .photo img{ aspect-ratio:4/3; object-fit:cover; } .photo figcaption{ font-size:13px; color:var(--ink-3); padding:12px 14px; border-top:1px solid var(--rule); background:#fff; } .agency-body h2{ margin-bottom:24px; max-width:18ch; } .agency-body p{ margin-bottom:18px; max-width:56ch; } .agency-body p:last-child{ margin-bottom:0; } .agency-body strong{ color:var(--ink); font-weight:600; } .people{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; padding-top:26px; border-top:1px solid var(--rule); } @media(max-width:520px){ .people{ grid-template-columns:1fr; } } .person b{ display:block; color:var(--ink); font-weight:600; font-size:15.5px; } .person span{ display:block; font-size:13.5px; color:var(--ink-3); margin-top:2px; } /* ============================================================ ABLAUF — sticky device, numbered rows ============================================================ */ .flow-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:start; } @media(max-width:900px){ .flow-grid{ grid-template-columns:1fr; } } .flow-stage{ position:sticky; top:118px; display:flex; justify-content:center; } .flow-stage .phone{ --w:clamp(220px, 22vw, 266px); } /* Single column: a sticky grid item is constrained by the whole grid container, not its own row, so it would drift over the step text. */ @media(max-width:900px){ .flow-stage{ position:static; margin-bottom:34px; } .flow-stage .phone{ --w:min(232px, 58vw); } } .steps{ border-top:1px solid var(--rule); } .step{ padding:26px 0 26px 20px; border-bottom:1px solid var(--rule); border-left:2px solid transparent; margin-left:-2px; transition:border-color .3s ease, opacity .3s ease; opacity:.5; } .step.active{ opacity:1; border-left-color:var(--accent); } @media(max-width:900px){ .step{ opacity:1; } .step.active{ border-left-color:var(--rule-2); } } @media(min-width:901px){ .step{ min-height:30vh; display:flex; flex-direction:column; justify-content:center; } } .step-meta{ display:flex; align-items:center; gap:12px; margin-bottom:9px; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .step-num{ color:var(--ink-3); } .step-who{ color:var(--ink-3); } .step-who.us{ color:var(--accent); } /* Bernstein wie im Onboarding-Interview der App (Theme.Color.interview) */ .step-who.ki{ color:#B4670F; } .step-meta .dash{ flex:1; height:1px; background:var(--rule); } .step h3{ margin-bottom:7px; } .step p{ font-size:15.5px; max-width:50ch; } /* how much time this step costs the customer — the whole point */ /* align-self, not just inline-block: .step is a flex column, so the badge would otherwise stretch across the full row. */ .cost{ display:inline-block; align-self:flex-start; margin-top:12px; font-size:12.5px; font-weight:500; color:var(--ink-3); border:1px solid var(--rule-2); border-radius:100px; padding:4px 12px; } .cost.none{ color:var(--accent); border-color:rgba(18,114,124,.3); background:var(--accent-tint); } /* ============================================================ APP SCREENS drawn inside a device (static, no loops) ============================================================ */ .mock{ position:absolute; inset:0; padding:14% 7% 8%; display:flex; flex-direction:column; background:#1B1E22; color:#E8EAEC; opacity:0; transition:opacity .28s ease; font-size:11px; } .mock.on{ opacity:1; } .mock-status{ display:flex; justify-content:space-between; font-size:9px; color:#7E858C; margin-bottom:15px; letter-spacing:.03em; } .mock-h{ font-size:14px; font-weight:600; letter-spacing:-.02em; margin-bottom:3px; color:#fff; } .mock-sub{ font-size:9.5px; color:#7E858C; margin-bottom:15px; } .m-list{ display:flex; flex-direction:column; gap:7px; } .m-row{ border:1px solid #2B2F35; border-radius:8px; padding:9px 10px; display:flex; align-items:center; gap:8px; background:#212429; } .m-k{ font-size:8.5px; color:#7E858C; text-transform:uppercase; letter-spacing:.08em; } .m-v{ font-size:10.5px; font-weight:500; color:#E8EAEC; margin-top:1px; } .m-tick{ margin-left:auto; color:#4ADE80; font-size:11px; } .m-scene{ border:1px solid #2B2F35; border-left:2px solid #2AB6C0; border-radius:6px; padding:8px 9px; background:#212429; } .m-scene + .m-scene{ margin-top:6px; } .m-scene b{ display:block; font-size:8.5px; color:#2AB6C0; font-weight:600; letter-spacing:.08em; margin-bottom:3px; } .m-scene span{ font-size:10px; line-height:1.45; color:#C6CACE; } .m-frame{ aspect-ratio:9/12; border:1px solid #2B2F35; border-radius:8px; background:#22262B; display:grid; place-items:center; margin-bottom:10px; } .m-frame span{ width:30px; height:30px; border-radius:50%; background:#2AB6C0; color:#0B1416; display:grid; place-items:center; font-size:11px; } .m-btns{ display:flex; gap:6px; } .m-btn{ flex:1; text-align:center; font-size:10px; font-weight:500; padding:8px 4px; border-radius:6px; } .m-btn.ok{ background:#2AB6C0; color:#0B1416; } .m-btn.alt{ border:1px solid #2B2F35; color:#A6ACB2; } .m-file{ border:1px solid #2B2F35; border-radius:8px; padding:10px; background:#212429; } .m-file-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; } .m-thumb{ width:26px; height:33px; border-radius:4px; background:#2E3A3C; flex-shrink:0; } .m-track{ height:3px; border-radius:2px; background:#2B2F35; overflow:hidden; } .m-track i{ display:block; height:100%; width:76%; background:#2AB6C0; border-radius:2px; } .m-cut{ aspect-ratio:9/11; border:1px solid #2B2F35; border-radius:8px; background:#22262B; display:grid; place-items:end center; padding-bottom:12px; margin-bottom:10px; } .m-cap{ font-size:10.5px; font-weight:600; background:rgba(0,0,0,.55); padding:3px 7px; border-radius:4px; } .m-cap b{ color:#2AB6C0; } .m-timeline{ display:flex; gap:2px; align-items:flex-end; height:22px; } .m-timeline i{ flex:1; background:#2E4B4E; border-radius:1px; } .m-post{ display:flex; align-items:center; gap:9px; border:1px solid #2B2F35; border-radius:8px; padding:10px; background:#212429; } .m-post + .m-post{ margin-top:7px; } .m-badge{ width:28px; height:28px; border-radius:7px; flex-shrink:0; display:grid; place-items:center; font-size:12px; } .m-badge.ig{ background:#3A2E42; } .m-badge.tt{ background:#26343A; } .m-post b{ display:block; font-size:10.5px; font-weight:500; color:#E8EAEC; } .m-post small{ display:block; font-size:8.5px; color:#7E858C; } .m-post em{ margin-left:auto; font-style:normal; font-size:12px; font-weight:600; color:#E8EAEC; } /* ------------------------------------------------------------ INTERVIEW SCREEN — nachgebaut nach InterviewView.swift. Zweiter Akzent #F59E4F (Theme.Color.interview), bewusst nicht das Teal: die App trennt Onboarding-Interview und Produktion farblich. KI-Blase links dunkel, Antwort rechts in Bernstein. ------------------------------------------------------------ */ .iv-head{ margin-bottom:12px; } .iv-head b{ display:block; font-size:10.5px; font-weight:600; color:#F59E4F; } .iv-head span{ display:block; font-size:8.5px; color:#7E858C; margin-top:1px; } .iv-chat{ flex:1; display:flex; flex-direction:column; gap:8px; } .iv-b{ max-width:82%; padding:8px 10px; border-radius:12px; font-size:10.5px; line-height:1.45; } .iv-b.ai{ align-self:flex-start; background:#2A2A2A; color:#E8EAEC; } .iv-b.me{ align-self:flex-end; background:#F59E4F; color:#fff; } .iv-typing{ align-self:flex-start; display:flex; gap:3px; background:#2A2A2A; padding:9px 11px; border-radius:100px; } .iv-typing i{ width:4px; height:4px; border-radius:50%; background:#7E858C; } .iv-bar{ margin-top:10px; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.2); border-radius:10px; padding:7px; } .iv-field{ flex:1; background:#2A2A2A; border-radius:9px; padding:7px 9px; font-size:9.5px; color:#7E858C; } .iv-mic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#F59E4F; border:1px solid rgba(245,158,79,.5); } .iv-note{ font-size:8px; color:#7E858C; text-align:center; margin-top:6px; } /* ------------------------------------------------------------ CAMERA SCREEN — rebuilt to match RecordingView.swift: full-bleed preview, top bar, camera tip, script box in the LOWER third at 45% black, and a segmented ring around a red record button. No timer, no highlighted line — the real screen has neither. ------------------------------------------------------------ */ .mock.cam{ padding:0; background:#000; } .cam-view{ position:absolute; inset:0; background: radial-gradient(ellipse 70% 50% at 50% 28%, #3C4A4E 0%, transparent 62%), linear-gradient(175deg, #2C3639 0%, #1A2124 46%, #12181A 100%); } .cam-ui{ position:absolute; inset:0; display:flex; flex-direction:column; padding:7% 5.5% 5.5%; } .cam-top{ display:flex; align-items:center; gap:6px; } .cam-x{ font-size:15px; color:rgba(255,255,255,.9); line-height:1; } .cam-pill{ margin-left:auto; font-size:8.5px; color:#fff; letter-spacing:.02em; background:rgba(60,64,68,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:3px 8px; border-radius:100px; } .cam-flip{ width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:9px; color:#fff; background:rgba(60,64,68,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .cam-tip{ display:flex; align-items:flex-start; gap:6px; margin-top:9px; font-size:8.5px; line-height:1.4; color:#fff; background:rgba(60,64,68,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:9px; padding:8px 9px; } .cam-tip i{ font-style:normal; opacity:.9; } .cam-tip u{ margin-left:auto; text-decoration:none; opacity:.8; } .cam-script{ margin-top:auto; background:rgba(0,0,0,.45); border-radius:12px; padding:11px 10px; text-align:center; font-size:11px; font-weight:600; line-height:1.42; color:#fff; min-height:34%; display:flex; align-items:center; justify-content:center; } .cam-bar{ margin-top:6px; background:rgba(0,0,0,.4); border-radius:12px; padding:10px 0; display:grid; place-items:center; } .cam-ring{ position:relative; width:52px; height:52px; display:grid; place-items:center; } .cam-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .cam-rec{ width:36px; height:36px; border-radius:50%; background:#FF3B30; } /* ============================================================ EFFORT ============================================================ */ .effort-in{ display:grid; grid-template-columns:auto 1fr; gap:clamp(26px,5vw,66px); align-items:center; } @media(max-width:760px){ .effort-in{ grid-template-columns:1fr; gap:24px; } } .effort-bars{ display:flex; gap:6px; } .effort-bars i{ width:26px; height:5px; border-radius:3px; background:var(--rule-2); } .effort-bars i.mine{ background:var(--accent); } .effort h2{ margin-bottom:12px; } /* ============================================================ APP-LOGO — kennzeichnet das Werkzeug, nicht die Agentur. Das Original ist weiss auf Transparenz (fuer dunkle Flaechen); fuer das helle Papier liegt daneben eine Tinten-Variante. ============================================================ */ .applogo{ display:block; width:clamp(190px, 20vw, 250px); height:auto; margin-bottom:20px; } /* ============================================================ APP SCREENSHOT ROW ============================================================ */ .shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,30px); } @media(max-width:900px){ .shots{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); scrollbar-width:none; } .shots::-webkit-scrollbar{ display:none; } .shot{ scroll-snap-align:center; } } .shot{ display:flex; flex-direction:column; align-items:center; } /* --w MUSS eine Laenge sein, nie 100%: padding und border-radius werden daraus berechnet, und ein Prozent-Radius loest horizontal gegen die Breite, vertikal gegen die Hoehe auf — das ergab verzerrte, ovale Ecken. */ .shot .phone{ --w:clamp(170px, 15.5vw, 230px); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .shot:hover .phone{ transform:translateY(-6px); box-shadow:var(--shadow-sm), 0 24px 46px -16px rgba(48,40,30,.34); } @media(max-width:900px){ .shot .phone{ --w:180px; } } .shot .phone .mock{ opacity:1; } .shot b{ display:block; color:var(--ink); font-weight:600; font-size:14.5px; margin-top:18px; } .shot span{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; text-align:center; } /* ============================================================ FEATURES (app subpage) ============================================================ */ .feat{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,76px); align-items:center; padding:clamp(44px,6vw,76px) 0; border-top:1px solid var(--rule); } .feat:first-of-type{ border-top:0; padding-top:0; } .feat.flip .feat-media{ order:2; } @media(max-width:880px){ .feat{ grid-template-columns:1fr; gap:30px; } .feat.flip .feat-media{ order:0; } } .feat-media{ display:flex; justify-content:center; } .feat-media .phone{ --w:clamp(210px, 21vw, 250px); } .feat h3{ font-size:clamp(20px,2.1vw,26px); margin-bottom:12px; } .feat p{ max-width:52ch; margin-bottom:14px; } .feat ul{ margin:0; padding:0; list-style:none; } .feat li{ position:relative; padding-left:22px; font-size:15.5px; margin-bottom:7px; } .feat li::before{ content:''; position:absolute; left:0; top:10px; width:8px; height:1.5px; background:var(--accent); } /* ============================================================ PREISE ============================================================ */ .incl{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; } .incl span{ font-size:13.5px; color:var(--ink-2); border:1px solid var(--rule-2); border-radius:100px; padding:6px 13px; background:#fff; } .plans{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--rule-2); border-radius:6px; overflow:hidden; background:#fff; } @media(max-width:1000px){ .plans{ grid-template-columns:repeat(3,1fr); } } @media(max-width:680px){ .plans{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .plans{ grid-template-columns:1fr; } } /* Uniform top padding on every card so the tag, lifted out of the flow into the corner, cannot push one column's heading onto a second line. */ .plan{ padding:34px 20px 24px; border-left:1px solid var(--rule); position:relative; } .plan:first-child{ border-left:0; } @media(max-width:1000px){ .plan:nth-child(3n+1){ border-left:0; } .plan:nth-child(n+4){ border-top:1px solid var(--rule); } } @media(max-width:680px){ .plan{ border-left:1px solid var(--rule); } .plan:nth-child(odd){ border-left:0; } .plan:nth-child(n+3){ border-top:1px solid var(--rule); } } @media(max-width:420px){ .plan{ border-left:0; } .plan + .plan{ border-top:1px solid var(--rule); } } .plan.pick{ background:var(--accent-tint); } .plan-top{ margin-bottom:2px; } .plan-freq{ color:var(--ink); font-weight:600; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; } .plan-tag{ position:absolute; top:12px; left:20px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); white-space:nowrap; } .plan-videos{ font-size:13px; color:var(--ink-3); margin-bottom:22px; } .plan-price{ color:var(--ink); font-weight:600; font-size:clamp(24px,2.4vw,29px); letter-spacing:-.03em; } .plan-unit{ font-size:13px; color:var(--ink-3); margin-top:3px; } .plan-month{ margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink-2); } .plan-month b{ color:var(--ink); font-weight:600; } .price-notes{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 28px; font-size:13.5px; color:var(--ink-3); } .price-notes b{ color:var(--ink); font-weight:600; } /* plain Q&A list */ .qa{ border-top:1px solid var(--rule); } .qa-item{ padding:22px 0; border-bottom:1px solid var(--rule); } .qa-item h3{ font-size:17px; margin-bottom:6px; } .qa-item p{ font-size:15.5px; max-width:66ch; } /* ============================================================ LEGAL — long-form reading column ============================================================ */ .legal{ max-width:74ch; } .legal h2{ font-size:clamp(19px,1.9vw,23px); margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--rule); } .legal h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; } .legal h3{ font-size:16.5px; margin:24px 0 7px; } .legal p{ margin-bottom:14px; } .legal ul{ margin:0 0 16px; padding-left:20px; } .legal li{ margin-bottom:7px; } .legal a{ color:var(--accent); border-bottom:1px solid rgba(18,114,124,.3); } .legal a:hover{ border-bottom-color:var(--accent); } .legal .meta{ font-size:13.5px; color:var(--ink-3); } .legal table{ width:100%; border-collapse:collapse; margin:6px 0 20px; font-size:14.5px; } .legal th,.legal td{ text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top; } .legal th{ color:var(--ink); font-weight:600; } .legal .tablewrap{ overflow-x:auto; } /* Placeholders that must not reach production unnoticed. */ .todo{ background:#FFF3CD; color:#6B4E00; border:1px dashed #C9A227; padding:1px 7px; border-radius:3px; font-size:.92em; font-weight:500; white-space:nowrap; } .notice{ border:1px solid #C9A227; background:#FFFBEF; color:#6B4E00; border-radius:6px; padding:16px 18px; margin-bottom:32px; font-size:14.5px; } .notice b{ color:#4A3600; } /* ============================================================ CTA + FOOTER ============================================================ */ .cta-in{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(26px,5vw,64px); align-items:center; } @media(max-width:820px){ .cta-in{ grid-template-columns:1fr; gap:26px; } } .cta h2{ margin-bottom:14px; max-width:16ch; } .cta-actions{ display:flex; flex-wrap:wrap; gap:11px; } .store{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 15px; border-radius:7px; background:var(--ink); color:#fff; transition:background .2s ease; } .store:hover{ background:#000; } .store svg{ width:21px; height:21px; } .store small{ display:block; font-size:9.5px; opacity:.72; line-height:1.2; } .store strong{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; } .store.soon{ background:transparent; color:var(--ink); border:1px solid var(--rule-2); cursor:default; } .store.soon:hover{ background:transparent; } .store.soon svg{ opacity:.45; } footer{ border-top:1px solid var(--rule); padding:34px 0 44px; } .foot{ display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--ink-3); } .foot a{ color:var(--ink-2); } .foot a:hover{ color:var(--accent); } .foot-links{ display:flex; gap:24px; flex-wrap:wrap; }