/* ========================================================================== UnterschriftDigital — design tokens (see DESIGN.md §14) + V3 hero Theme lock: light. One accent (brand green). One radius system. Vanilla HTML5/CSS3 port of app/globals.css. The font-family CSS variables below replace what next/font injected onto in the Next.js app. ========================================================================== */ /* ---------- Self-hosted signature typefaces (shown when a name is typed) ---------- */ @font-face{font-family:"Daniel";src:url("fonts/daniel.woff2") format("woff2"),url("fonts/daniel.ttf") format("truetype");font-display:swap} @font-face{font-family:"Raustila";src:url("fonts/raustila-Regular.woff2") format("woff2"),url("fonts/raustila-Regular.otf") format("opentype");font-display:swap} @font-face{font-family:"Thesignature";src:url("fonts/Thesignature.woff2") format("woff2"),url("fonts/Thesignature.otf") format("opentype");font-display:swap} @font-face{font-family:"Quentin";src:url("fonts/Quentin.woff2") format("woff2"),url("fonts/Quentin.otf") format("opentype");font-display:swap} @font-face{font-family:"Get Show";src:url("fonts/Get Show.woff2") format("woff2"),url("fonts/Get Show.otf") format("opentype");font-display:swap} @font-face{font-family:"Signatura Monoline";src:url("fonts/Signatura Monoline.woff2") format("woff2"),url("fonts/Signatura Monoline.otf") format("opentype");font-display:swap} @font-face{font-family:"Onelove";src:url("fonts/onelove.woff2") format("woff2"),url("fonts/onelove.otf") format("opentype");font-display:swap} @font-face{font-family:"Rembank";src:url("fonts/Rembank.woff2") format("woff2"),url("fonts/Rembank.otf") format("opentype");font-display:swap} @font-face{font-family:"High Empathy";src:url("fonts/High Empathy.woff2") format("woff2"),url("fonts/High Empathy.otf") format("opentype");font-display:swap} @font-face{font-family:"Abuget";src:url("fonts/Abuget.woff2") format("woff2"),url("fonts/Abuget.ttf") format("truetype");font-display:swap} @font-face{font-family:"Alagambe";src:url("fonts/alagambe.woff2") format("woff2"),url("fonts/alagambe.otf") format("opentype");font-display:swap} @font-face{font-family:"Nalika Signature";src:url("fonts/NalikaSignature.woff2") format("woff2"),url("fonts/NalikaSignature.otf") format("opentype");font-display:swap} @font-face{font-family:"Bitcheese";src:url("fonts/Bitcheese.woff2") format("woff2"),url("fonts/Bitcheese.otf") format("opentype");font-display:swap} @font-face{font-family:"Roustel";src:url("fonts/Roustel.woff2") format("woff2"),url("fonts/Roustel.ttf") format("truetype");font-display:swap} @font-face{font-family:"Reading";src:url("fonts/Reading Regular.woff2") format("woff2"),url("fonts/Reading Regular.otf") format("opentype");font-display:swap} @font-face{font-family:"Mayonice";src:url("fonts/Mayonice.woff2") format("woff2"),url("fonts/Mayonice.otf") format("opentype");font-display:swap} @font-face{font-family:"Skincake";src:url("fonts/Skincake.woff2") format("woff2"),url("fonts/Skincake.otf") format("opentype");font-display:swap} @font-face{font-family:"Jaceline";src:url("fonts/Jaceline.woff2") format("woff2"),url("fonts/Jaceline.ttf") format("truetype");font-display:swap} @font-face{font-family:"Reman";src:url("fonts/Reman.woff2") format("woff2"),url("fonts/Reman.ttf") format("truetype");font-display:swap} @font-face{font-family:"Paul Signature";src:url("fonts/Paul Signature.woff2") format("woff2"),url("fonts/Paul Signature.ttf") format("truetype");font-display:swap} @font-face{font-family:"Maytra";src:url("fonts/Maytra.woff2") format("woff2"),url("fonts/Maytra.otf") format("opentype");font-display:swap} @font-face{font-family:"BlackSingature";src:url("fonts/BlackSingature.woff2") format("woff2"),url("fonts/BlackSingature.otf") format("opentype");font-display:swap} @font-face{font-family:"Sansilk";src:url("fonts/Sansilk.woff2") format("woff2"),url("fonts/Sansilk.otf") format("opentype");font-display:swap} @font-face{font-family:"Callheart";src:url("fonts/Callheart.woff2") format("woff2"),url("fonts/Callheart.otf") format("opentype");font-display:swap} @font-face{font-family:"Celliad";src:url("fonts/Celliad.woff2") format("woff2"),url("fonts/Celliad.otf") format("opentype");font-display:swap} @font-face{font-family:"Rumpi";src:url("fonts/Rumpi.woff2") format("woff2"),url("fonts/Rumpi.otf") format("opentype");font-display:swap} @font-face{font-family:"Royalty Free";src:url("fonts/Royalty Free.woff2") format("woff2"),url("fonts/Royalty Free.otf") format("opentype");font-display:swap} @font-face{font-family:"Soljik Dambaek";src:url("fonts/Soljik-Dambaek.woff2") format("woff2"),url("fonts/Soljik-Dambaek.ttf") format("truetype");font-display:swap} @font-face{font-family:"Patung";src:url("fonts/Patung.woff2") format("woff2"),url("fonts/Patung.otf") format("opentype");font-display:swap} @font-face{font-family:"Calloveya";src:url("fonts/Calloveya.woff2") format("woff2"),url("fonts/Calloveya.otf") format("opentype");font-display:swap} @font-face{font-family:"Jocky Starline";src:url("fonts/Jocky Starline.woff2") format("woff2"),url("fonts/Jocky Starline.ttf") format("truetype");font-display:swap} @font-face{font-family:"Quetine";src:url("fonts/Quetine.woff2") format("woff2"),url("fonts/Quetine.otf") format("opentype");font-display:swap} @font-face{font-family:"Flyover";src:url("fonts/Flyover.woff2") format("woff2"),url("fonts/Flyover.otf") format("opentype");font-display:swap} @font-face{font-family:"Bestermind";src:url("fonts/BestermindRegular.woff2") format("woff2"),url("fonts/BestermindRegular.ttf") format("truetype");font-display:swap} @font-face{font-family:"Astagina Signature";src:url("fonts/Astagina Signature.woff2") format("woff2"),url("fonts/Astagina Signature.otf") format("opentype");font-display:swap} @font-face{font-family:"Stigmature";src:url("fonts/Stigmature.woff2") format("woff2"),url("fonts/Stigmature.otf") format("opentype");font-display:swap} @font-face{font-family:"Royalia";src:url("fonts/Royalia.woff2") format("woff2"),url("fonts/Royalia.ttf") format("truetype");font-display:swap} @font-face{font-family:"Harshita";src:url("fonts/Harshita.woff2") format("woff2"),url("fonts/Harshita.otf") format("opentype");font-display:swap} @font-face{font-family:"Tirelessly Love You";src:url("fonts/Tirelessly Love You.woff2") format("woff2"),url("fonts/Tirelessly Love You.otf") format("opentype");font-display:swap} @font-face{font-family:"AnsteryScript";src:url("fonts/AnsteryScript.woff2") format("woff2"),url("fonts/AnsteryScript.otf") format("opentype");font-display:swap} @font-face{font-family:"Bambi Handwritten Font";src:url("fonts/Bambi Handwritten Font.woff2") format("woff2"),url("fonts/Bambi Handwritten Font.otf") format("opentype");font-display:swap} @font-face{font-family:"Radith";src:url("fonts/Radith.woff2") format("woff2"),url("fonts/Radith.otf") format("opentype");font-display:swap} @font-face{font-family:"Whitenice";src:url("fonts/Whitenice.woff2") format("woff2"),url("fonts/Whitenice.otf") format("opentype");font-display:swap} @font-face{font-family:"Birthlong";src:url("fonts/Birthlong.woff2") format("woff2"),url("fonts/Birthlong.otf") format("opentype");font-display:swap} @font-face{font-family:"Testimonia";src:url("fonts/Testimonia.woff2") format("woff2"),url("fonts/Testimonia.otf") format("opentype");font-display:swap} @font-face{font-family:"Bilya Signature";src:url("fonts/Bilya Signature.woff2") format("woff2"),url("fonts/Bilya Signature.otf") format("opentype");font-display:swap} @font-face{font-family:"Singlong";src:url("fonts/Singlong.woff2") format("woff2"),url("fonts/Singlong.otf") format("opentype");font-display:swap} @font-face{font-family:"Days of Charity";src:url("fonts/Days of Charity.woff2") format("woff2"),url("fonts/Days of Charity.otf") format("opentype");font-display:swap} @font-face{font-family:"Cetary";src:url("fonts/Cetary.woff2") format("woff2"),url("fonts/Cetary.otf") format("opentype");font-display:swap} @font-face{font-family:"Travel November";src:url("fonts/Travel November.woff2") format("woff2"),url("fonts/Travel November.otf") format("opentype");font-display:swap} @font-face{font-family:"White Pinky";src:url("fonts/White Pinky.woff2") format("woff2"),url("fonts/White Pinky.otf") format("opentype");font-display:swap} @font-face{font-family:"Ranget";src:url("fonts/Ranget.woff2") format("woff2"),url("fonts/Ranget.otf") format("opentype");font-display:swap} @font-face{font-family:"Opencare";src:url("fonts/Opencare.woff2") format("woff2"),url("fonts/Opencare.otf") format("opentype");font-display:swap} @font-face{font-family:"Cintaly";src:url("fonts/Cintaly.woff2") format("woff2"),url("fonts/Cintaly.otf") format("opentype");font-display:swap} @font-face{font-family:"Freehand Signature";src:url("fonts/Freehand Signature.woff2") format("woff2"),url("fonts/Freehand Signature.otf") format("opentype");font-display:swap} @font-face{font-family:"Dufanthe";src:url("fonts/Dufanthe.woff2") format("woff2"),url("fonts/Dufanthe.otf") format("opentype");font-display:swap} @font-face{font-family:"Alucky";src:url("fonts/Alucky.woff2") format("woff2"),url("fonts/Alucky.otf") format("opentype");font-display:swap} @font-face{font-family:"The Suavity";src:url("fonts/The Suavity.woff2") format("woff2"),url("fonts/The Suavity.otf") format("opentype");font-display:swap} @font-face{font-family:"Mini Story";src:url("fonts/Mini Story.woff2") format("woff2"),url("fonts/Mini Story.otf") format("opentype");font-display:swap} @font-face{font-family:"BigSpender v1";src:url("fonts/BigSpender-v1.woff2") format("woff2"),url("fonts/BigSpender-v1.otf") format("opentype");font-display:swap} @font-face{font-family:"Baiklah";src:url("fonts/Baiklah.woff2") format("woff2"),url("fonts/Baiklah.otf") format("opentype");font-display:swap} @font-face{font-family:"Barokah Signature by Alifinart Studio";src:url("fonts/Barokah Signature by Alifinart Studio.woff2") format("woff2"),url("fonts/Barokah Signature by Alifinart Studio.ttf") format("truetype");font-display:swap} @font-face{font-family:"Anjhay";src:url("fonts/Anjhay.woff2") format("woff2"),url("fonts/Anjhay.otf") format("opentype");font-display:swap} @font-face{font-family:"Halu";src:url("fonts/Halu.woff2") format("woff2"),url("fonts/Halu.otf") format("opentype");font-display:swap} @font-face{font-family:"CognitoScripto";src:url("fonts/CognitoScripto.woff2") format("woff2"),url("fonts/CognitoScripto.otf") format("opentype");font-display:swap} @font-face{font-family:"Golden Graph";src:url("fonts/Golden Graph.woff2") format("woff2"),url("fonts/Golden Graph.ttf") format("truetype");font-display:swap} @font-face{font-family:"Travellia";src:url("fonts/Travellia.woff2") format("woff2"),url("fonts/Travellia.otf") format("opentype");font-display:swap} @font-face{font-family:"William";src:url("fonts/William.woff2") format("woff2"),url("fonts/William.otf") format("opentype");font-display:swap} @font-face{font-family:"Showclick";src:url("fonts/Showclick.woff2") format("woff2"),url("fonts/Showclick.otf") format("opentype");font-display:swap} @font-face{font-family:"Mowgli Script";src:url("fonts/Mowgli Script.woff2") format("woff2"),url("fonts/Mowgli Script.otf") format("opentype");font-display:swap} @font-face{font-family:"SweetPoems";src:url("fonts/SweetPoems.woff2") format("woff2"),url("fonts/SweetPoems.ttf") format("truetype");font-display:swap} @font-face{font-family:"Lilly";src:url("fonts/Lilly.woff2") format("woff2"),url("fonts/Lilly.ttf") format("truetype");font-display:swap} @font-face{font-family:"Southja";src:url("fonts/Southja.woff2") format("woff2"),url("fonts/Southja.otf") format("opentype");font-display:swap} @font-face{font-family:"AngelSignature";src:url("fonts/AngelSignature.woff2") format("woff2"),url("fonts/AngelSignature.otf") format("opentype");font-display:swap} @font-face{font-family:"Mayorice";src:url("fonts/Mayorice.woff2") format("woff2"),url("fonts/Mayorice.otf") format("opentype");font-display:swap} @font-face{font-family:"Tanda Tangan";src:url("fonts/Tanda Tangan.woff2") format("woff2"),url("fonts/Tanda Tangan.ttf") format("truetype");font-display:swap} @font-face{font-family:"Unique Surfer";src:url("fonts/Unique Surfer.woff2") format("woff2"),url("fonts/Unique Surfer.ttf") format("truetype");font-display:swap} @font-face{font-family:"Naycila";src:url("fonts/Naycila.woff2") format("woff2"),url("fonts/Naycila.ttf") format("truetype");font-display:swap} @font-face{font-family:"Reyhans";src:url("fonts/Reyhans.woff2") format("woff2"),url("fonts/Reyhans.otf") format("opentype");font-display:swap} @font-face{font-family:"Alfath Signature";src:url("fonts/Alfath Signature.woff2") format("woff2"),url("fonts/Alfath Signature.otf") format("opentype");font-display:swap} @font-face{font-family:"Budaphest";src:url("fonts/Budaphest.woff2") format("woff2"),url("fonts/Budaphest.ttf") format("truetype");font-display:swap} @font-face{font-family:"Awali";src:url("fonts/Awali.woff2") format("woff2"),url("fonts/Awali.otf") format("opentype");font-display:swap} @font-face{font-family:"Vegan Days";src:url("fonts/Vegan Days.woff2") format("woff2"),url("fonts/Vegan Days.otf") format("opentype");font-display:swap} @font-face{font-family:"Celinea";src:url("fonts/Celinea.woff2") format("woff2"),url("fonts/Celinea.otf") format("opentype");font-display:swap} @font-face{font-family:"Malvides";src:url("fonts/Malvides.woff2") format("woff2"),url("fonts/Malvides.otf") format("opentype");font-display:swap} :root { /* Font families (were provided by next/font in the React app) */ --font-display:"Plus Jakarta Sans"; --font-ui:"Inter"; /* Signature styles now map to self-hosted FlickSign typefaces */ --font-elegant:"Quentin"; --font-klassisch:"Thesignature"; --font-modern:"Signatura Monoline"; --font-schwung:"Raustila"; --font-persoenlich:"Daniel"; --font-kraeftig:"Rembank"; --font-fein:"High Empathy"; --font-geschwungen:"Get Show"; --font-kalligrafie:"Onelove"; --font-zart:"Abuget"; --font-anmutig:"Alagambe"; --font-filigran:"Nalika Signature"; --font-stilvoll:"Mayonice"; --font-edel:"Maytra"; --font-formell:"Reading"; --font-italienisch:"Jaceline"; --font-kuenstlerisch:"Bitcheese"; --font-locker:"Skincake"; --font-fliessend:"Reman"; --font-laessig:"Roustel"; --font-dynamisch:"Paul Signature"; /* Brand (green) */ --brand-50:#ECFDF3;--brand-100:#D1FADF;--brand-200:#A6F4C5;--brand-300:#6CE9A6; --brand-400:#32D583;--brand-500:#17C964;--brand-600:#12A150;--brand-700:#0E8C46; /* Ink (text) */ --ink-900:#0A0F0D;--ink-800:#111714;--ink-700:#1C2521;--ink-500:#5B6B63;--ink-400:#7C8A82;--ink-300:#A7B2AC; /* Surfaces & borders */ --surface-0:#FFFFFF;--surface-50:#FBFEFB;--surface-100:#F4F8F5;--surface-200:#EAF1EC; --border:#E4ECE7;--border-strong:#D3DED8; /* Gradients & washes */ --grad-primary:linear-gradient(180deg,#19D16A 0%,#12A150 100%); --mint-hero:radial-gradient(120% 80% at 50% 0%,#E7F8EC 0%,#F1FBF3 36%,#FBFEFB 70%); /* Elevation (tinted to bg hue) */ --shadow-sm:0 4px 14px rgba(10,40,24,.06); --shadow-md:0 14px 34px rgba(8,60,34,.10); --shadow-lg:0 28px 70px rgba(6,70,39,.12); --shadow-brand:0 14px 30px rgba(23,201,100,.28); /* Radii — one scale */ --r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px; /* Layout */ --container:1200px; --gutter:clamp(20px,5vw,56px); /* Motion */ --ease:cubic-bezier(.22,1,.36,1); --t-fast:150ms;--t:220ms; /* Focus ring */ --ring:0 0 0 4px rgba(23,201,100,.30); --font-sans:var(--font-ui),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --font-grotesk:var(--font-display),var(--font-ui),ui-sans-serif,system-ui,sans-serif; } *{box-sizing:border-box} html{min-height:100%;overflow-x:hidden;background:var(--surface-50);scroll-behavior:smooth} body{ min-height:100%;margin:0;color:var(--ink-900); background:var(--mint-hero);background-attachment:fixed; font-family:var(--font-sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} button,input{font:inherit} :where(a,button,input,[tabindex]):focus-visible{outline:0;box-shadow:var(--ring)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Shell ---------- */ .site{min-height:100dvh;overflow:hidden} .hero{position:relative;overflow:hidden;padding-bottom:clamp(56px,8vw,96px)} .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} /* ambient decoration */ .blob{position:absolute;border-radius:50%;filter:blur(60px);background:rgba(23,201,100,.10);pointer-events:none;z-index:0} .blob.a{width:420px;height:420px;top:90px;left:-130px} .blob.b{width:360px;height:360px;top:240px;right:-110px} .ink-deco{position:absolute;z-index:0;pointer-events:none;fill:none;stroke:rgba(23,201,100,.12);stroke-width:5;stroke-linecap:round;stroke-linejoin:round} .ink-deco.l{top:200px;left:-150px;width:440px;transform:rotate(-4deg)} .ink-deco.r{bottom:60px;right:-150px;width:420px;transform:scaleX(-1) rotate(-5deg)} /* ---------- Nav ---------- */ .nav{ position:relative;z-index:5;margin-top:20px; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px; height:70px;padding:0 16px 0 20px; background:rgba(255,255,255,.86);backdrop-filter:blur(18px); border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm); } .brand{display:flex;align-items:center;gap:10px;min-width:0} .brand-mark{width:36px;height:36px;display:grid;place-items:center;color:var(--brand-600);flex:0 0 auto} .brand-mark svg{width:100%;height:100%} .brand-name{font-family:var(--font-grotesk);font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink-900);white-space:nowrap} .de{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:7px;color:#fff;font-size:12px;font-weight:800;background:var(--grad-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} .nav-links{display:flex;justify-content:center;gap:clamp(22px,3vw,38px);font-size:15.5px;font-weight:500;color:var(--ink-700)} .nav-links a{transition:color var(--t-fast) var(--ease)} .nav-links a:hover{color:var(--brand-700)} .nav-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:700;white-space:nowrap;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)} .btn:active{transform:translateY(1px) scale(.99)} .btn-ghost{height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--brand-500);color:var(--brand-700);background:transparent;font-weight:600} .btn-ghost:hover{background:var(--brand-50)} .btn-primary{height:48px;padding:0 22px;border-radius:var(--r-pill);color:#fff;background:var(--grad-primary);box-shadow:var(--shadow-brand)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(23,201,100,.34)} .btn svg{width:16px;height:16px} /* ---------- Hero head ---------- */ .hero-head{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(40px,6vw,72px)} .eyebrow{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--r-pill);background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-700);font-size:12.5px;font-weight:600;letter-spacing:.02em} h1{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.045em;color:var(--ink-900);margin:18px auto 0;max-width:760px;text-wrap:balance;text-align:center} h1 .ac{color:var(--brand-500)} .lead{margin:16px 0 0;max-width:560px;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:var(--ink-500)} /* ---------- Generator (client) ---------- */ .gen{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center} .searchbar{ margin-top:30px;width:min(100%,640px); display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center; background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-pill); padding:9px 9px 9px 22px;box-shadow:var(--shadow-lg); transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .searchbar:focus-within{border-color:var(--brand-400);box-shadow:var(--shadow-lg),0 0 0 5px rgba(23,201,100,.12)} .searchbar .inp{display:flex;align-items:center;gap:12px;min-width:0} .searchbar .inp svg{width:21px;height:21px;color:var(--brand-600);flex:0 0 auto} .searchbar input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:20px;font-weight:500;color:var(--ink-900)} .searchbar input::placeholder{color:var(--ink-300)} .searchbar .btn-primary{height:52px;padding:0 28px;font-size:16px} .gen-hint{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-400)} .gen-hint svg{width:14px;height:14px} /* ---------- Style grid ---------- */ .style-grid{ margin-top:clamp(28px,4vw,42px);width:100%; display:grid;grid-template-columns:repeat(3,1fr);gap:18px; } .scard{ position:relative;background:var(--surface-0);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--shadow-sm); min-height:146px;display:grid;place-items:center;overflow:hidden;cursor:pointer;text-align:center; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease); } .scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .scard:focus-visible{box-shadow:var(--ring)} .scard .lbl{position:absolute;left:16px;top:14px;z-index:2;font-size:12.5px;font-weight:600;color:var(--ink-400);transition:color var(--t) var(--ease)} .scard .nm{position:relative;z-index:1;color:var(--ink-900);line-height:1;padding:18px;max-width:100%;overflow:hidden;white-space:nowrap; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .scard .nm.empty{color:var(--ink-300)} /* protective watermark behind signatures (grid + studio preview) */ .wm{position:absolute;top:-45%;left:-30%;width:170%;height:200%;z-index:0;transform:rotate(-22deg); font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:rgba(10,15,13,.05);line-height:2.7;word-spacing:.3em; overflow:hidden;pointer-events:none;user-select:none} .scard.sel{border:1.6px solid var(--brand-500);box-shadow:0 0 0 4px rgba(23,201,100,.16),var(--shadow-md);transform:translateY(-3px)} .scard.sel .lbl{color:var(--brand-700)} .scard .check{position:absolute;top:12px;right:12px;z-index:2;width:24px;height:24px;border-radius:50%;background:var(--brand-500);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)} .scard.sel .check{opacity:1;transform:scale(1)} .scard .check svg{width:14px;height:14px;color:#fff} /* ---------- "Load more" signature styles ---------- */ .load-more-wrap{display:flex;justify-content:center;width:100%;margin-top:22px} .load-more{height:46px;padding:0 26px;gap:10px;border-radius:var(--r-pill); background:var(--surface-0);border:1px solid var(--border);box-shadow:var(--shadow-sm); color:var(--ink-900);font-weight:700;font-size:14.5px; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .load-more:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-300)} .load-more:focus-visible{box-shadow:var(--ring)} .load-more small{font-weight:600;font-size:12px;color:var(--ink-400);font-variant-numeric:tabular-nums} /* ---------- appearance controls (inline, above the grid) ---------- */ .controls-bar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;width:100%;margin-top:22px;padding:14px 20px; background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-sm)} .cblock{display:flex;flex-direction:column;gap:8px;min-width:0} .cblock.grow{flex:1 1 180px} .cbl{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)} .cbl i{font-style:normal;color:var(--ink-700);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums} .cdiv{width:1px;align-self:stretch;background:var(--border);margin:2px 0} .swatches{display:flex;gap:9px;align-items:center} .sw{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(10,15,13,.12);cursor:pointer;transition:transform var(--t-fast) var(--ease)} .sw:hover{transform:scale(1.08)} .sw.on{box-shadow:0 0 0 2px var(--surface-0),0 0 0 3px var(--brand-500)} .sw-custom{background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#7ee8fa,#17C964,#9b5cf6,#ff5f6d);display:grid;place-items:center} .sw-custom::after{content:"";width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)} .sw-custom.on::after{display:none} input[type=range]{width:100%;height:22px;accent-color:var(--brand-500);cursor:pointer} /* ---------- global export bar (one download for the collection) ---------- */ .export-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;width:100%;margin-top:22px; padding:14px 20px;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .export-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .seg{display:inline-flex;background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px} .seg button{height:32px;padding:0 15px;border:0;background:transparent;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-500);cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease)} .seg button.on{background:var(--surface-0);color:var(--ink-900);box-shadow:0 1px 2px rgba(10,15,13,.08)} .formats{display:flex;gap:8px} .fmt{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 13px;border-radius:var(--r-md);background:var(--surface-100);border:1px solid transparent;color:var(--ink-700);font-weight:700;font-size:13px;cursor:pointer;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)} .fmt small{font-weight:500;color:var(--ink-400);font-size:10.5px} .fmt.on{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-700)} .fmt.on small{color:var(--brand-600)} .dl-btn{height:50px;padding:0 24px} .dl-note{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-700);font-size:13.5px;font-weight:600} .dl-note svg{width:15px;height:15px;flex:0 0 auto} /* ---------- Enclosing white card (wraps BOTH signature methods) ---------- */ .sig-card{ width:100%;margin-top:clamp(26px,4vw,40px); display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.4vw,22px); padding:clamp(20px,3vw,34px); background:var(--surface-0);border:1px solid var(--border); border-radius:var(--r-xl);box-shadow:var(--shadow-lg); } /* Flatten inner elements so we don't stack elevated white cards on white. */ .sig-card .sig-tabs{margin-top:0} .sig-card .searchbar{margin-top:0;width:100%;box-shadow:none;background:var(--surface-50);border-color:var(--border-strong)} .sig-card .searchbar:focus-within{box-shadow:0 0 0 5px rgba(23,201,100,.12)} .sig-card .controls-bar{box-shadow:none;background:var(--surface-50)} .sig-card .export-bar{box-shadow:none;background:var(--surface-50)} .sig-card .draw-wrap{margin-top:0} .sig-card .draw-canvas{box-shadow:none;background:transparent} .sig-card .scard{background:var(--surface-50)} /* ---------- Tab switcher (type / draw) ---------- */ .sig-tabs{display:inline-flex;gap:6px;margin-top:30px;padding:6px;background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-sm)} .sig-tab{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-500);font-weight:700;font-size:15px;cursor:pointer; transition:color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease)} .sig-tab svg{width:18px;height:18px} .sig-tab.on{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-brand)} .sig-tab:not(.on):hover{color:var(--brand-700)} /* tab panels share the centered-column layout of .gen */ .tab-panel{width:100%;display:flex;flex-direction:column;align-items:center} .tab-panel[hidden]{display:none} /* ---------- Draw tab (V1 clean signature-pad) ---------- */ /* Full width to match the name-type interface; box lives on the wrapper so the real stays transparent and the dotted-grid + baseline guide show through. */ .draw-wrap{position:relative;width:100%;margin-top:30px;overflow:hidden; border:1.5px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-50); box-shadow:inset 0 1px 3px rgba(10,40,24,.05)} .draw-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(10,40,24,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.7} .draw-canvas{display:block;position:relative;z-index:1;width:100%;height:240px;background:transparent; border:0;border-radius:inherit;touch-action:none;cursor:crosshair; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* sign-here guide (dashed baseline + × marker), sits behind the ink */ .draw-guide{position:absolute;inset:0;z-index:0;pointer-events:none} .draw-baseline{position:absolute;left:26px;right:26px;bottom:58px;border-top:2px dashed var(--border-strong)} .draw-xmark{position:absolute;left:26px;bottom:48px;display:flex;align-items:center;gap:8px; color:var(--ink-300);font-size:22px;font-weight:600;line-height:1} .draw-xmark i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-300);transform:translateY(-3px)} /* centered prompt replaced by the × guide */ .draw-hint{display:none} /* smoothing toggle switch */ .toggle{position:relative;width:46px;height:26px;border:0;padding:0;border-radius:var(--r-pill);background:var(--surface-200);cursor:pointer;transition:background var(--t) var(--ease)} .toggle .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,15,13,.25);transition:transform var(--t) var(--ease)} .toggle.on{background:var(--brand-500)} .toggle.on .knob{transform:translateX(20px)} /* slim pen toolbar (V1 signature-pad style) */ .draw-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;margin-top:18px;padding:11px 16px; background:var(--surface-50);border:1px solid var(--border);border-radius:var(--r-pill)} .dt-group{display:flex;align-items:center;gap:10px;min-width:0} .dt-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)} .dt-div{width:1px;align-self:stretch;background:var(--border);margin:3px 0} .dt-spacer{flex:1 1 auto} .dt-actions{display:flex;gap:8px} /* round icon buttons (undo / redo / clear) */ .icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--surface-0);border:1px solid var(--border);color:var(--ink-700);cursor:pointer; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)} .icon-btn:hover{border-color:var(--brand-300);color:var(--brand-700);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .icon-btn svg{width:18px;height:18px} .icon-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;border-color:var(--border);color:var(--ink-700)} /* stroke-width presets (thin / medium / thick) */ .stroke-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-pill)} .stroke-seg button{width:42px;height:30px;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--r-pill);cursor:pointer; transition:background var(--t) var(--ease)} .stroke-seg button:hover{background:var(--surface-100)} .stroke-seg button.on{background:var(--brand-50)} .stroke-seg .lw{display:block;width:22px;border-radius:3px;background:var(--ink-700);transition:background var(--t) var(--ease)} .stroke-seg button.on .lw{background:var(--brand-700)} .lw-1{height:2px} .lw-2{height:3.5px} .lw-3{height:6px} /* ---------- entrance motion ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0;transform:translateY(16px);animation:rise .6s var(--ease) both;animation-delay:var(--d,0ms)} /* cards fade in only (no transform) so the hover lift owns transform and never hides */ .scard{opacity:0;animation:fade-in .55s var(--ease) both;animation-delay:var(--d,0ms)} @keyframes rise{to{opacity:1;transform:translateY(0)}} @keyframes fade-in{to{opacity:1}} } /* ---------- Responsive ---------- */ @media (max-width:1000px){ .nav{grid-template-columns:1fr auto} .nav-links{display:none} .style-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .nav{gap:10px;padding:0 12px 0 14px;height:62px} .nav-actions .btn-ghost{display:none} .brand-name{font-size:16px} .brand-mark{width:30px;height:30px} .nav-actions .btn-primary{height:42px;padding:0 15px;font-size:14px} .nav-actions .btn-primary svg{display:none} .hero-head h1,.hero-head .lead{max-width:100%} h1{font-size:clamp(28px,7.6vw,38px)} .searchbar{grid-template-columns:1fr;gap:8px;border-radius:var(--r-lg);padding:14px} .searchbar .inp{border:1.5px solid var(--border-strong);border-radius:var(--r-md);height:54px;padding:0 16px} .searchbar .btn-primary{width:100%;height:52px} .searchbar:focus-within{box-shadow:var(--shadow-lg)} .style-grid{grid-template-columns:1fr} .sig-tabs{display:flex;width:100%;margin-top:24px} .sig-tab{flex:1 1 0;min-width:0;justify-content:center;height:auto;min-height:44px;padding:6px 8px;font-size:12.5px;line-height:1.15;white-space:normal;text-align:center} .sig-tab svg{display:none} .export-actions{width:100%;flex-direction:column;align-items:stretch} .btn-copy{width:100%} .draw-canvas{height:200px} .draw-actions{width:100%} .draw-actions .ghost-btn{flex:1 1 0;justify-content:center} .controls-bar{border-radius:var(--r-lg);gap:16px} .cdiv{display:none} .export-bar{flex-direction:column;align-items:stretch} .export-left{justify-content:space-between} .dl-btn{width:100%} .ink-deco{opacity:.6;width:320px} .blob{filter:blur(50px)} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ========================================================================== LANDING SECTIONS (below the hero) — VideoMule-inspired premium SaaS Reuses the DESIGN.md token system already defined in :root. ========================================================================== */ /* allow content to flow below the 100dvh hero */ .site{min-height:auto} /* ---------- section shell & shared typography ---------- */ .section{position:relative;padding-block:clamp(64px,9vw,128px)} .container-narrow{max-width:780px} .sec-head{max-width:720px;margin:0 auto clamp(34px,5vw,58px);text-align:center;display:flex;flex-direction:column;align-items:center} .eyebrow-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:var(--r-pill); background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-700);font-size:12.5px;font-weight:700;letter-spacing:.02em} .sec-h{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.035em; color:var(--ink-900);margin:16px 0 0;text-wrap:balance} .sec-h .ac{color:var(--brand-500)} .sec-lead{margin:16px auto 0;max-width:640px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--ink-500)} .sec-note-center{max-width:700px;margin:clamp(24px,3vw,36px) auto 0;text-align:center;font-size:15.5px;line-height:1.65;color:var(--ink-500)} .ideas-h{max-width:700px;margin:clamp(30px,3.6vw,42px) auto 0;text-align:center;font-family:var(--font-grotesk);font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;color:var(--ink-900)} .ideas-h + .sec-note-center{margin-top:10px} .sec-body{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--ink-500)} .text-link{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:var(--brand-700);font-weight:700;font-size:15px; transition:gap var(--t) var(--ease),color var(--t) var(--ease)} .text-link svg{width:17px;height:17px} .text-link:hover{gap:11px;color:var(--brand-600)} /* section background rhythm (alternating white / soft-grey, mint + dark as accents) */ .sec-intro,.sec-features,.sec-faq,.sec-trust,.sec-lass,.sec-anpassen{background:var(--surface-0)} .sec-usecases,.sec-compare{background:var(--surface-100)} .sec-steps,.sec-canvas-wrap,.sec-stats{background:transparent} .sec-cta{background:#fff} /* ---------- Stats strip (quick facts) ---------- */ .sec-stats{padding-block:clamp(28px,4vw,44px)} .stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:clamp(20px,2.6vw,30px) clamp(16px,3vw,40px); background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)} .stat{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative} .stat + .stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:38px;width:1px;background:var(--border)} .stat-n{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:-.03em; background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-l{font-size:13px;font-weight:600;color:var(--ink-500)} /* ---------- Split layout (text + product mockup) ---------- */ .split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,68px);align-items:center} .split-copy{text-align:left} .split-copy .sec-h,.split-copy .sec-lead{text-align:left;margin-inline:0} .split-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:520px} .split-list li{display:flex;gap:14px;align-items:flex-start} .sl-ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600)} .sl-ico svg{width:21px;height:21px} .split-list h3{margin:2px 0 4px;font-family:var(--font-grotesk);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--ink-900)} .split-list p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-500)} /* controls mockup (the "show, don't tell" product card) */ .split-visual{display:flex;justify-content:center} .mock-panel{width:100%;max-width:380px;background:var(--surface-0);border:1px solid var(--border-strong); border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:22px} .mp-head{display:flex;gap:7px;margin-bottom:6px} .mp-dot{width:10px;height:10px;border-radius:50%;background:var(--surface-200)} .mp-sig{text-align:center;font-size:clamp(44px,6vw,56px);line-height:1.25;color:var(--ink-900); padding:6px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap} .mp-row{display:flex;align-items:center;gap:14px;margin-top:15px} .mp-lbl{flex:0 0 60px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)} .mp-sws{display:flex;gap:9px} .mp-sws i{width:24px;height:24px;border-radius:50%;border:1px solid rgba(10,15,13,.12)} .mp-sws i.on{box-shadow:0 0 0 2px var(--surface-0),0 0 0 3.5px var(--brand-500)} .mp-range{flex:1;height:6px;border-radius:var(--r-pill);background:var(--surface-200);position:relative} .mp-range i{position:absolute;left:0;top:0;height:6px;border-radius:var(--r-pill);background:var(--grad-primary)} .mp-range i::after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:16px; border-radius:50%;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--border)} .mp-tg{width:44px;height:25px;border-radius:var(--r-pill);background:var(--surface-200);position:relative} .mp-tg span{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,15,13,.25)} .mp-tg.on{background:var(--brand-500)} .mp-tg.on span{transform:translateX(19px)} /* ---------- §1 Was ist (two-column) ---------- */ .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center} .intro-copy{text-align:left} .intro-copy .sec-h,.intro-copy .sec-lead{text-align:left;margin-inline:0} .intro-card{position:relative;background:var(--surface-50);border:1px solid var(--border);border-radius:var(--r-xl); box-shadow:var(--shadow-md);padding:clamp(22px,3vw,32px);overflow:hidden} .ic-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-400)} .ic-dot{width:9px;height:9px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 0 4px rgba(23,201,100,.16)} .ic-sig{margin:18px 0 22px;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--ink-900);white-space:nowrap;overflow:hidden} .ic-meta{display:flex;flex-wrap:wrap;gap:8px} .ic-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:var(--r-pill); background:var(--surface-0);border:1px solid var(--border);color:var(--ink-700);font-size:12.5px;font-weight:700} .ic-chip svg{width:13px;height:13px} .ic-chip-ok{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-700)} /* ---------- §2 So funktioniert (horizontal step cards) ---------- */ .steps{list-style:none;margin:0;padding:0} .steps-h{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);max-width:1000px;margin-inline:auto} .steps-h .step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,26px);background:var(--surface-0); border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .steps-h .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .step-ico{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%; background:var(--brand-50);color:var(--brand-600)} .step-ico svg{width:28px;height:28px} .step-num{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%; background:var(--grad-primary);color:#fff;font-family:var(--font-grotesk);font-weight:800;font-size:12px; box-shadow:var(--shadow-brand);border:2px solid var(--surface-0)} .steps-h .step h3{margin:16px 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;color:var(--ink-900)} .steps-h .step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-500);text-align:left} /* connector line behind the icon row (desktop only, where padding is stable) */ @media (min-width:1024px){ .steps-h::before{content:"";position:absolute;top:65px;left:18%;right:18%;height:2px;z-index:0; background:linear-gradient(90deg,var(--brand-200),var(--brand-300),var(--brand-200))} } /* ---------- §4 Product canvas (signature styles showcase) ---------- */ .canvas-panel{position:relative;overflow:hidden;background:#fff;border:none;border-radius:32px; padding:clamp(34px,5vw,72px) clamp(24px,4vw,56px);box-shadow:0 0 0 6px rgba(23,201,100,.15),var(--shadow-lg);text-align:center} .canvas-panel::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:120%;height:60%; background:radial-gradient(closest-side,rgba(23,201,100,.20),transparent);pointer-events:none} /* combined style-category cards: font sample + description in one card */ .style-cat-grid{position:relative;margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px);text-align:left} .style-cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .style-cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .style-cat-sample{display:flex;align-items:center;justify-content:center;min-height:118px;padding:18px 22px; background:var(--surface-50);border-bottom:1px solid var(--border)} .style-cat-sample span{display:block;font-size:clamp(26px,6vw,48px);line-height:1;color:var(--ink-900);white-space:nowrap;overflow:hidden;max-width:100%} .style-cat-body{padding:clamp(18px,2vw,24px)} .style-cat-body h3{margin:0 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;color:var(--ink-900)} .style-cat-body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-500)} .canvas-groups{position:relative;margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:9px} .cg{display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:var(--r-pill); background:rgba(255,255,255,.05);border:1px solid var(--canvas-700,#1F2C25);color:#c3d2c9;font-size:13px;font-weight:600} .btn-canvas{position:relative;margin-top:30px;height:50px;padding:0 24px;border-radius:var(--r-pill); background:var(--brand-500);color:#fff;font-weight:700;border:none;box-shadow:0 4px 12px rgba(23,201,100,.3)} .btn-canvas:hover{transform:translateY(-2px)} .btn-canvas svg{width:16px;height:16px} /* ---------- §6 Features grid ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px)} .feat-card{position:relative;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);padding:clamp(22px,2.6vw,30px);overflow:hidden; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .feat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .feat-lg{grid-column:span 1} .feat-card:nth-child(3),.feat-card:nth-child(4),.feat-card:nth-child(5){grid-column:span 2} .feat-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600);margin-bottom:16px} .feat-ico svg{width:23px;height:23px} .feat-card h3{margin:0 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;color:var(--ink-900)} .feat-card p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-500);max-width:46ch} .feat-mock{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px; background:var(--surface-50);border:1px solid var(--border);border-radius:var(--r-md)} .mock-styles span{font-size:28px;line-height:1;color:var(--ink-800)} .mock-controls{gap:10px} .mc-dot{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)} .mc-dot.mc-on{box-shadow:0 0 0 2px var(--surface-50),0 0 0 4px var(--brand-500)} .mc-bar{flex:1 1 80px;height:6px;border-radius:var(--r-pill);background:var(--surface-200);position:relative} .mc-bar i{position:absolute;left:0;top:50%;transform:translateY(-50%);width:62%;height:6px;border-radius:var(--r-pill);background:var(--grad-primary)} .mc-bar::after{content:"";position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--border)} /* ---------- Tiles grid (use-cases, features, types, tips) ---------- */ .tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px} .tiles-2{grid-template-columns:repeat(2,1fr)} .stile-clusters{margin-top:clamp(26px,4vw,42px)} .uc-card-hl{border-color:var(--brand-300);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand-200),var(--shadow-sm)} /* ---------- §9 Arten — icon-led reference list (taxonomy) ---------- */ .types-list{list-style:none;margin:0;padding:0;max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:12px} .type-item{display:flex;gap:18px;align-items:flex-start;padding:clamp(18px,2.2vw,24px);background:var(--surface-0); border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .type-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .type-ico{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-md);background:var(--surface-100);color:var(--ink-700)} .type-ico svg{width:24px;height:24px} .type-item.is-ours{background:var(--brand-50);border-color:var(--brand-200);box-shadow:0 0 0 1px var(--brand-200),var(--shadow-sm)} .type-item.is-ours .type-ico{background:#fff;color:var(--brand-600)} .type-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px} .type-body h3{margin:0;font-family:var(--font-grotesk);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink-900)} .type-body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-500)} .type-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--grad-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap} /* ---------- §12 Gute Unterschrift — numbered principles ---------- */ .tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,24px)} .tip{position:relative;padding:clamp(22px,2.6vw,30px);background:var(--surface-0);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .tip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .tip-num{display:block;font-family:var(--font-grotesk);font-weight:800;font-size:clamp(30px,4vw,40px);line-height:1; letter-spacing:-.03em;color:var(--brand-500);margin-bottom:12px} .tip h3{margin:0 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:17.5px;letter-spacing:-.01em;color:var(--ink-900)} .tip p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-500)} /* ---------- §10 Rechtsgültig — color-coded legal status ---------- */ .legal-states{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .legal-card{padding:clamp(24px,2.8vw,32px);background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .legal-card.ok{border-top:3px solid var(--brand-500)} .legal-card.warn{border-top:3px solid #F5A524} .legal-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:14px} .legal-card.ok .legal-ico{background:var(--brand-50);color:var(--brand-600)} .legal-card.warn .legal-ico{background:#FEF3E2;color:#B26A00} .legal-ico svg{width:24px;height:24px} .legal-card h3{margin:0 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink-900)} .legal-card p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-500)} .legal-callout{display:flex;gap:18px;align-items:flex-start;margin-top:16px;padding:clamp(22px,2.6vw,28px); background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-lg)} .legal-callout-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md);background:#fff;color:var(--brand-600);box-shadow:var(--shadow-xs,0 1px 2px rgba(10,15,13,.05))} .legal-callout-ico svg{width:24px;height:24px} .legal-callout h3{margin:0 0 6px;font-family:var(--font-grotesk);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink-900)} .legal-callout p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-700)} /* ---------- §8 Dokumente — compatibility strip ---------- */ .compat-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-0);border:1px solid var(--border); border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden} .compat-item{padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,24px);text-align:center;border-left:1px solid var(--border); transition:background var(--t) var(--ease)} .compat-item:first-child{border-left:0} .compat-item:hover{background:var(--surface-50)} .compat-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600);margin-bottom:14px} .compat-ico svg{width:26px;height:26px} .compat-item h3{margin:0 0 7px;font-family:var(--font-grotesk);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink-900)} .compat-item p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-500)} /* ---------- §13 Warum — checklist + trust-badge card ---------- */ .check-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;max-width:520px} .check-list li{display:flex;gap:14px;align-items:flex-start} .cl-ico{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand-500);color:#fff;margin-top:1px} .cl-ico svg{width:15px;height:15px} .check-list h3{margin:0 0 3px;font-family:var(--font-grotesk);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--ink-900)} .check-list p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-500)} .trust-badge-card{width:100%;max-width:380px;background:var(--surface-0);border:1px solid var(--border-strong); border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:26px;text-align:center} .tbc-sig{font-size:clamp(46px,6vw,60px);line-height:1.2;color:var(--ink-900);padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border);overflow:hidden;white-space:nowrap} .tbc-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tbc-badges span{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 12px;border-radius:var(--r-md);background:var(--surface-50);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink-700)} .tbc-badges svg{width:16px;height:16px;color:var(--brand-600);flex:0 0 auto} /* ---------- §6 Designen lassen (editorial) ---------- */ .sec-lass{background:var(--surface-0)} .lass-copy{text-align:center} .lass-copy p{margin:0 auto 16px;max-width:66ch;font-size:clamp(15.5px,1.3vw,17px);line-height:1.7;color:var(--ink-500)} .lass-cta{display:flex;margin-top:28px} /* ideas / suggestions mockup */ .ideas-mock{width:100%;max-width:400px;background:var(--surface-0);border:1px solid var(--border-strong); border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:18px} .im-head{margin:2px 4px 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)} .im-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;padding:8px 16px; background:var(--surface-50);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden; transition:border-color var(--t) var(--ease)} .im-row:last-child{margin-bottom:0} .im-name{font-size:clamp(28px,3.4vw,36px);line-height:1.25;color:var(--ink-900);white-space:nowrap;overflow:hidden} .im-row.sel{background:var(--brand-50);border-color:var(--brand-400);box-shadow:0 0 0 2px rgba(23,201,100,.16)} .im-check{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand-500);opacity:0;transform:scale(.6);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)} .im-row.sel .im-check{opacity:1;transform:scale(1)} .im-check svg{width:12px;height:12px;color:#fff} /* ---------- §9 Use-cases (persona tabs) ---------- */ .uc-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)} .uc-tab{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-radius:var(--r-pill); background:var(--surface-0);border:1px solid var(--border);color:var(--ink-700);font-weight:700;font-size:14.5px;cursor:pointer; transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)} .uc-tab svg{width:18px;height:18px;color:var(--brand-600);transition:color var(--t) var(--ease)} .uc-tab:hover{border-color:var(--brand-300);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .uc-tab.on{background:var(--grad-primary);border-color:transparent;color:#fff;box-shadow:var(--shadow-brand)} .uc-tab.on svg{color:#fff} .uc-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .uc-panel[hidden]{display:none} .uc-card{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm); padding:24px;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)} .uc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand-200)} .uc-card h3{margin:0 0 8px;font-family:var(--font-grotesk);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink-900)} .uc-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-500)} .uc-note,.trust-hint{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center; margin:clamp(28px,4vw,40px) auto 0;max-width:680px;padding:14px 20px;border-radius:var(--r-md); background:var(--surface-0);border:1px solid var(--border);color:var(--ink-500);font-size:13.5px;line-height:1.5} .uc-note svg,.trust-hint svg{width:20px;height:20px;flex:0 0 auto;color:var(--brand-600)} /* ---------- §11 Comparison table ---------- */ .cmp-wrap{max-width:960px;margin-inline:auto;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);background:var(--surface-0)} .cmp-table{width:100%;border-collapse:collapse;min-width:620px} .cmp-table th,.cmp-table td{padding:15px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--border)} .cmp-table thead th{font-family:var(--font-grotesk);font-weight:700;font-size:14px;color:var(--ink-700);background:var(--surface-50);position:sticky;top:0} .cmp-table tbody th{font-weight:700;color:var(--ink-800);width:140px} .cmp-table td{color:var(--ink-500)} .cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0} .cmp-crit{width:140px} .cmp-table .cmp-us{background:rgba(23,201,100,.06);color:var(--ink-900);font-weight:600} .cmp-table thead .cmp-us{background:var(--brand-50);color:var(--brand-700)} .cmp-table td.cmp-no{color:var(--ink-300)} /* ---------- §10 Trust ---------- */ .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .trust-card{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:26px} .trust-card h3{margin:0 0 10px;font-family:var(--font-grotesk);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink-900)} .trust-card p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-500)} .trust-accent{background:var(--brand-50);border-color:var(--brand-200)} .trust-accent .feat-ico{background:#fff} /* ---------- §13 FAQ ---------- */ .faq-list{display:flex;flex-direction:column;border-top:1px solid var(--border)} .faq-item{border-bottom:1px solid var(--border)} .faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer; padding:20px 4px;font-family:var(--font-grotesk);font-weight:600;font-size:clamp(16px,1.5vw,18px);color:var(--ink-800); transition:color var(--t) var(--ease)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--brand-700)} .faq-ico{position:relative;flex:0 0 auto;width:20px;height:20px} .faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--brand-600);border-radius:2px;transition:transform var(--t) var(--ease)} .faq-ico::before{top:9px;left:3px;right:3px;height:2px} .faq-ico::after{left:9px;top:3px;bottom:3px;width:2px} .faq-item[open] .faq-ico::after{transform:scaleY(0)} .faq-a{padding:0 4px 22px;max-width:70ch;font-size:15px;line-height:1.65;color:var(--ink-500)} @media (prefers-reduced-motion: no-preference){ .faq-item[open] .faq-a{animation:faq-in .24s var(--ease) both} @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} } /* ---------- §14 CTA band ---------- */ .sec-cta .cta-band{position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center; padding:clamp(44px,6vw,80px) clamp(24px,4vw,56px);border-radius:32px; background:var(--mint-hero);border:1px solid var(--brand-100);box-shadow:var(--shadow-md)} .sec-cta .cta-band .blob{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);background:rgba(23,201,100,.16);top:-120px;left:50%;transform:translateX(-50%)} .cta-band .eyebrow-pill,.cta-band .sec-h,.cta-band .sec-lead{position:relative} .cta-btn{height:54px;padding:0 30px;margin-top:26px;font-size:16px;position:relative} .cta-chips{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px} .cta-chips span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-500)} .cta-chips span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-500)} /* ---------- Footer ---------- */ .footer{background:var(--surface-100);border-top:1px solid var(--border);padding-block:clamp(48px,6vw,72px) 28px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)} .foot-brand p{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-500);max-width:34ch} .foot-col h4{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-400)} .foot-col a{display:block;padding:6px 0;font-size:15px;color:var(--ink-700);transition:color var(--t-fast) var(--ease)} .foot-col a:hover{color:var(--brand-700)} .foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(36px,5vw,56px); padding-top:22px;border-top:1px solid var(--border);font-size:13.5px;color:var(--ink-400)} .foot-locale{display:inline-flex;align-items:center;gap:7px} /* ---------- scroll-reveal (opt-in; never hides content if JS is absent) ---------- */ @media (prefers-reduced-motion: no-preference){ body.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)} body.reveal-ready [data-reveal].is-in{opacity:1;transform:none} } /* ---------- Responsive ---------- */ @media (max-width:1000px){ .intro-grid{grid-template-columns:1fr} .intro-card{order:-1} .canvas-grid{grid-template-columns:repeat(2,1fr)} .feat-grid{grid-template-columns:1fr} .feat-lg,.feat-card:nth-child(3),.feat-card:nth-child(4),.feat-card:nth-child(5){grid-column:span 1} .trust-grid{grid-template-columns:1fr} .split{grid-template-columns:1fr} .split-list{max-width:none} .compat-strip{grid-template-columns:repeat(2,1fr)} .compat-item:nth-child(odd){border-left:0} .compat-item:nth-child(n+3){border-top:1px solid var(--border)} .check-list{max-width:none} .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} } @media (max-width:760px){ .stats-band{grid-template-columns:repeat(2,1fr);gap:22px 8px} .stat:nth-child(3)::before,.stat:nth-child(2)::before{display:none} .compat-strip{grid-template-columns:1fr} .compat-item{border-left:0;border-top:1px solid var(--border)} .compat-item:first-child{border-top:0} .intro-copy .sec-h,.intro-copy .sec-lead{text-align:center} .intro-copy{text-align:center;display:flex;flex-direction:column;align-items:center} .canvas-grid,.style-cat-grid{grid-template-columns:1fr} .tiles-2{grid-template-columns:1fr} .tips-grid,.legal-states{grid-template-columns:1fr} .steps-h{grid-template-columns:1fr;max-width:420px} .uc-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scrollbar-width:none} .uc-tabs::-webkit-scrollbar{display:none} .uc-tab{flex:0 0 auto} .foot-grid{grid-template-columns:1fr 1fr} .foot-bar{flex-direction:column;gap:10px;align-items:flex-start} } /* ---------- Export actions (copy + download side by side) ---------- */ .export-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .btn-copy{height:50px;padding:0 20px;border-radius:var(--r-pill);background:var(--surface-0);border:1.5px solid var(--border-strong);color:var(--ink-700);font-weight:700;font-size:14.5px} .btn-copy:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50);transform:translateY(-1px);box-shadow:var(--shadow-sm)} .btn-copy:focus-visible{box-shadow:var(--ring)} .btn-copy svg{width:16px;height:16px} /* ---------- Upload tab (photo of a real signature) ---------- */ .upload-drop{width:100%;margin-top:30px;padding:clamp(34px,5vw,56px) 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;cursor:pointer; border:2px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface-50);color:var(--ink-500); transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)} .upload-drop:hover,.upload-drop:focus-visible{border-color:var(--brand-400);background:var(--brand-50)} .upload-drop:focus-visible{outline:0;box-shadow:var(--ring)} .upload-drop.dragover{border-color:var(--brand-500);background:var(--brand-50);transform:scale(1.01)} .upload-drop svg{width:34px;height:34px;color:var(--brand-600)} .upload-drop strong{font-size:17px;font-weight:700;color:var(--ink-900)} .upload-drop span{font-size:13.5px;line-height:1.55;color:var(--ink-400);max-width:460px} .upload-stage{width:100%;display:flex;flex-direction:column;align-items:center} .upload-stage[hidden]{display:none} .crop-stage{width:100%;margin-top:30px} .crop-stage[hidden]{display:none} .crop-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-50)} .crop-head strong{display:block;margin-bottom:3px;color:var(--ink-900);font-size:15px;font-weight:800} .crop-head span{display:block;color:var(--ink-500);font-size:13.5px;line-height:1.45} .crop-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .crop-rotate{width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--surface-0);border:1px solid var(--border-strong);color:var(--ink-700)} .crop-rotate:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50)} .crop-rotate svg{width:19px;height:19px} .crop-apply{height:44px;flex:0 0 auto;padding-inline:20px} .crop-angle{width:100%;display:grid;grid-template-columns:auto minmax(160px,1fr) 52px;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0)} .crop-angle span{color:var(--ink-600);font-size:13px;font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em} .crop-angle span i{font-style:normal;color:var(--brand-700)} .crop-angle input{height:22px} .crop-angle-reset{height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-50);border:1px solid var(--border-strong);color:var(--ink-700);font-weight:800;font-size:13px} .crop-angle-reset:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50)} .crop-box{position:relative;width:100%;min-height:240px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;border:1.5px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface-100);touch-action:none} #up-crop-canvas{display:block;max-width:100%;border-radius:8px;background:#fff;box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .crop-rect{position:absolute;border:2px solid var(--brand-500);border-radius:8px;box-shadow:0 0 0 9999px rgba(10,15,13,.42);cursor:move;touch-action:none} .crop-rect i{position:absolute;width:22px;height:22px;border:2px solid var(--brand-500);border-radius:50%;background:#fff;box-shadow:var(--shadow-sm)} .crop-rect .tl{top:-12px;left:-12px;cursor:nwse-resize} .crop-rect .tr{top:-12px;right:-12px;cursor:nesw-resize} .crop-rect .br{right:-12px;bottom:-12px;cursor:nwse-resize} .crop-rect .bl{bottom:-12px;left:-12px;cursor:nesw-resize} .up-preview{width:100%;margin-top:30px;min-height:180px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden; border:1.5px solid var(--border-strong);border-radius:var(--r-lg); background-image:conic-gradient(rgba(10,15,13,.06) 90deg,transparent 90deg 180deg,rgba(10,15,13,.06) 180deg 270deg,transparent 270deg); background-size:18px 18px;background-color:var(--surface-0)} #up-preview-wrap[hidden],#up-controls[hidden],#up-export[hidden]{display:none} #up-canvas{max-width:100%;border-radius:6px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .up-reset{height:34px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface-0);border:1px solid var(--border-strong);color:var(--ink-700);font-weight:600;font-size:13px} .up-reset:hover{border-color:var(--brand-400);color:var(--brand-700)} .sw-orig{position:relative;background:linear-gradient(135deg,#2b2b2b 0%,#6b4a2f 45%,#1b2b55 100%);display:grid;place-items:center} .sw-orig::after{content:"";width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)} .sw-orig.on::after{display:none} @media(max-width:680px){ .crop-head{align-items:stretch;flex-direction:column} .crop-actions{width:100%;display:grid;grid-template-columns:44px 44px 1fr} .crop-angle{grid-template-columns:1fr 52px} .crop-angle span{grid-column:1/-1} .crop-apply{width:100%} } /* ---------- Kauf-Funnel Modal ---------- */ body.ud-modal-open{overflow:hidden} .ud-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px} .ud-modal[hidden]{display:none} .ud-modal-backdrop{position:absolute;inset:0;background:rgba(8,14,11,.55);backdrop-filter:blur(3px)} .ud-modal-card{position:relative;width:min(100%,480px);max-height:calc(100vh - 36px);overflow-y:auto;background:var(--surface-0);border-radius:20px;padding:30px 28px;box-shadow:0 30px 80px rgba(8,20,14,.35);animation:pmIn .28s var(--ease)} @keyframes pmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .ud-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface-100);color:var(--ink-500);cursor:pointer} .ud-modal-x:hover{background:var(--surface-50);color:var(--ink-900)} .ud-modal-x svg{width:16px;height:16px} .pm-step{display:flex;flex-direction:column;align-items:center;text-align:center} .pm-step[hidden]{display:none} .pm-icon{width:56px;height:56px;border-radius:50%;background:var(--brand-50);display:grid;place-items:center;color:var(--brand-600);margin-bottom:14px} .pm-icon svg{width:26px;height:26px} .pm-icon-ok{background:var(--brand-500);color:#fff} .pm-step h3{margin:0 0 6px;font-family:var(--font-grotesk);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink-900)} .pm-sub{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--ink-500);max-width:360px} .pm-options{display:flex;flex-direction:column;gap:9px;width:100%} .pm-options button{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-0);cursor:pointer;text-align:left;transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)} .pm-options button:hover{border-color:var(--brand-400);background:var(--brand-50);transform:translateY(-1px)} .pm-options strong{display:block;font-size:14.5px;color:var(--ink-900)} .pm-options small{display:block;font-size:12px;color:var(--ink-400);margin-top:1px} .pm-oi{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;font-size:17px} .pm-oi-a{background:#FFF3E4}.pm-oi-b{background:#E8F0FE}.pm-oi-c{background:#F4E9FD}.pm-oi-d{background:#E6F7EC}.pm-oi-e{background:var(--surface-100)} .pm-skip{margin-top:14px;border:0;background:transparent;color:var(--ink-400);font-size:13px;cursor:pointer} .pm-skip:hover{color:var(--ink-700);text-decoration:underline} .pm-files{list-style:none;margin:4px 0 14px;padding:0;width:100%;max-width:320px;text-align:left} .pm-files li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-700);padding:3px 0;animation:pmIn .2s var(--ease)} .pm-files li svg{width:14px;height:14px;color:var(--brand-600);flex:0 0 auto} .pm-bar{width:100%;max-width:320px;height:7px;border-radius:99px;background:var(--surface-100);overflow:hidden} .pm-bar span{display:block;height:100%;width:4%;border-radius:99px;background:var(--grad-primary);transition:width .3s var(--ease)} .pm-steps{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink-400);margin-bottom:16px} .pm-steps i{width:26px;height:1.5px;background:var(--border-strong)} .pm-steps .done{color:var(--brand-600)} .pm-steps .done::before{content:"✓ "} .pm-steps .cur{color:var(--ink-900)} .pm-preview{width:100%;display:flex;align-items:center;justify-content:center;min-height:96px;padding:12px;margin-bottom:14px;border:1.5px solid var(--border-strong);border-radius:14px;background-image:conic-gradient(rgba(10,15,13,.05) 90deg,transparent 90deg 180deg,rgba(10,15,13,.05) 180deg 270deg,transparent 270deg);background-size:16px 16px;background-color:var(--surface-0)} .pm-benefits{list-style:none;margin:2px 0 14px;padding:0;width:100%;text-align:left} .pm-benefits li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--ink-700);padding:4px 0} .pm-benefits li svg{width:16px;height:16px;color:var(--brand-600);flex:0 0 auto;margin-top:2px} .pm-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;margin-bottom:14px;border-radius:14px;background:var(--brand-50);border:1px solid var(--brand-200)} .pm-price strong{font-family:var(--font-grotesk);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink-900)} .pm-price small{display:block;font-size:11.5px;color:var(--ink-500);margin-top:1px} .pm-guarantee{font-size:12px;font-weight:700;color:var(--brand-700);text-align:right} .pm-field{width:100%;text-align:left;margin-bottom:11px} .pm-field span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:5px} .pm-field small{font-weight:500;color:var(--ink-400)} .pm-field input{width:100%;height:44px;padding:0 14px;border:1.5px solid var(--border-strong);border-radius:12px;font-size:14.5px;color:var(--ink-900);outline:0} .pm-field input:focus{border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(23,201,100,.12)} .pm-consent{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;font-size:12px;line-height:1.5;color:var(--ink-500);margin-bottom:14px;cursor:pointer} .pm-consent input{margin-top:2px;accent-color:var(--brand-500);width:15px;height:15px;flex:0 0 auto} .pm-consent a{color:var(--brand-700)} .pm-pay{width:100%;height:52px;font-size:16px} .pm-pay:disabled{opacity:.65;cursor:wait;transform:none} .pm-paynote{margin:9px 0 0;font-size:12px;color:var(--ink-400);min-height:15px} .pm-trust{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0;font-size:12px;color:var(--ink-400)} .pm-trust svg{width:15px;height:15px;color:var(--brand-600)} /* Preis-Hinweis unter den Export-Leisten */ .pay-hint{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;font-size:12.5px;color:var(--ink-400)} .pay-hint svg{width:14px;height:14px;color:var(--brand-600)} .pay-hint strong{color:var(--ink-700)} .pay-hint a{color:var(--brand-700);font-weight:600} .pm-email-btn{width:100%;height:46px;margin-top:10px;border-radius:var(--r-pill);background:var(--surface-0);border:1.5px solid var(--border-strong);color:var(--ink-700);font-weight:700;font-size:14.5px;gap:8px} .pm-email-btn[hidden]{display:none} .pm-email-btn:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50)} .pm-email-btn svg{width:17px;height:17px} .pm-license{margin:12px 0 0;font-size:12px;color:var(--ink-400);font-variant-numeric:tabular-nums} .pm-license strong{color:var(--ink-700);letter-spacing:.02em} /* ========================================================================== Dedizierte Checkout-Seite (checkout.html) — conversion-optimiert, ablenkungsfrei (keine Navigation/Links), DESIGN.md-Marke. ========================================================================== */ .co-body{background:radial-gradient(120% 80% at 50% 0%,#E7F8EC 0%,#F1FBF3 34%,var(--surface-50) 70%);min-height:100vh} .co-main{max-width:1060px;width:100%;margin:0 auto;padding:clamp(16px,3vw,30px) clamp(16px,4vw,40px) 56px} /* Vertrauensleiste (kein Navigations-Link) */ .co-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(20px,3vw,34px)} .co-brand-lock{display:inline-flex;align-items:center;gap:10px} .co-secure{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--brand-700); background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-pill);padding:7px 14px} .co-secure svg{width:15px;height:15px} /* Leerer Zustand */ /* WICHTIG: display:flex/grid überschreibt das [hidden]-Attribut — explizit aushebeln */ .co-empty[hidden],.co-grid[hidden],.co-success[hidden],.co-buy[hidden]{display:none} .co-empty{max-width:520px;margin:9vh auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px} .co-empty .pm-icon{margin-bottom:2px} .co-empty h1{font-family:var(--font-grotesk);font-size:26px;letter-spacing:-.02em;color:var(--ink-900);margin:6px auto 0;text-align:center} .co-empty p{color:var(--ink-500);font-size:15px;line-height:1.55;margin:0 0 8px} .co-empty .btn-primary{height:50px;padding:0 26px} /* Layout */ .co-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(20px,3.5vw,44px);align-items:start} .co-left,.co-right{min-width:0} #co-canvas{max-width:100%;height:auto} /* Linke Spalte — Wert vor Preis */ .co-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--brand-700);margin-bottom:14px} .co-uc{text-transform:none;letter-spacing:0;font-weight:700;color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-pill);padding:3px 11px;font-size:12px} .co-steps{display:flex;flex-wrap:wrap;gap:8px 6px;list-style:none;margin:0 0 18px;padding:0;font-size:12px;font-weight:700;color:var(--ink-400)} .co-steps li{display:inline-flex;align-items:center;gap:6px} .co-steps li::after{content:"›";margin-left:4px;color:var(--ink-300)} .co-steps li:last-child::after{content:""} .co-steps .done{color:var(--brand-600)} .co-steps .done::before{content:"✓";font-weight:800} .co-steps .cur{color:var(--ink-900)} .co-title{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.035em;line-height:1.04;color:var(--ink-900);margin:0 auto 12px;text-wrap:balance;text-align:center} .co-title .ac{color:var(--brand-500)} .co-lead{font-size:15px;line-height:1.55;color:var(--ink-500);margin:0 0 22px;max-width:520px} .co-lead strong{color:var(--ink-800)} .co-preview{display:flex;align-items:center;justify-content:center;min-height:158px;padding:20px;margin-bottom:26px;border:1.5px solid var(--border-strong);border-radius:var(--r-lg); background-image:conic-gradient(rgba(10,15,13,.05) 90deg,transparent 90deg 180deg,rgba(10,15,13,.05) 180deg 270deg,transparent 270deg);background-size:18px 18px;background-color:var(--surface-0);box-shadow:var(--shadow-sm)} .co-h2{font-family:var(--font-grotesk);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink-900);margin:0 0 12px} .co-benefits{margin:0 0 24px} .co-assure{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--border)} .co-assure span{display:inline-flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;color:var(--ink-600)} .co-assure svg{width:18px;height:18px;color:var(--brand-600);flex:0 0 auto;margin-top:1px} /* Rechte Spalte — Kaufkarte (sticky) */ .co-right{position:sticky;top:22px} .co-card{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:clamp(22px,2.6vw,30px)} .co-buy{position:relative} .co-guarantee{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--brand-700); background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-pill);padding:6px 13px;margin-bottom:16px} .co-guarantee svg{width:15px;height:15px} .co-price{display:flex;flex-direction:column;gap:2px;margin-bottom:14px} .co-price-num{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(38px,5vw,46px);letter-spacing:-.03em;line-height:1;color:var(--ink-900);font-variant-numeric:tabular-nums} .co-price-sub{font-size:13px;color:var(--ink-500)} .co-quick{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0} .co-quick li{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-600);background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 11px} .co-quick li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-500)} .co-cta{width:100%;height:54px;font-size:16.5px;margin-top:4px} .co-pays{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);text-align:center} .co-pays-lead{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-500)} .co-pays-lead svg{width:14px;height:14px;color:var(--brand-600)} .co-pay-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px} .co-pay-chips i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-500);background:var(--surface-100);border:1px solid var(--border);border-radius:6px;padding:4px 9px;letter-spacing:.01em} /* Erfolg */ .co-success{text-align:center;display:flex;flex-direction:column;align-items:center} .co-success h2{font-family:var(--font-grotesk);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink-900);margin:12px 0 6px} .co-success-sub{font-size:14px;line-height:1.5;color:var(--ink-500);margin:0 0 18px;max-width:340px} .co-success .pm-pay{width:100%} @media (max-width:860px){ .co-grid{grid-template-columns:1fr} .co-right{position:static;order:-1} } @media (max-width:560px){ .co-topbar{flex-wrap:wrap;gap:10px} .co-brand-lock .brand-name{font-size:16px} .co-secure{font-size:11.5px;padding:6px 11px} .co-title{font-size:26px} } /* ========================================================================== Sekundärseiten — Über uns, Kontakt, Rechtstexte (gleiche Marke wie Startseite) ========================================================================== */ .subpage{background:radial-gradient(120% 55% at 50% 0%,#E7F8EC 0%,#F1FBF3 28%,var(--surface-50) 58%);min-height:100vh} .subpage .nav{margin-bottom:6px} .page-hero{max-width:var(--container);margin:0 auto;padding:clamp(26px,5vw,58px) var(--gutter) clamp(16px,3vw,28px);text-align:center} .page-hero .eyebrow-pill{margin-bottom:16px} .page-hero h1{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(30px,5vw,48px);letter-spacing:-.035em;line-height:1.05;color:var(--ink-900);margin:0 auto 14px;max-width:760px;text-align:center;text-wrap:balance} .page-hero h1 .ac{color:var(--brand-500)} .page-lead{max-width:620px;margin:0 auto;font-size:clamp(15px,1.4vw,17.5px);line-height:1.6;color:var(--ink-500)} .doc{max-width:760px;margin:0 auto;padding:clamp(22px,4vw,40px) var(--gutter) clamp(44px,7vw,72px)} .doc-lead{font-size:18px;line-height:1.65;color:var(--ink-700);margin:0 0 20px} .doc h2{font-family:var(--font-grotesk);font-weight:700;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;color:var(--ink-900);margin:clamp(30px,4vw,44px) 0 12px} .doc h3{font-size:17px;font-weight:700;color:var(--ink-800);margin:22px 0 8px} .doc p{font-size:16px;line-height:1.7;color:var(--ink-600);margin:0 0 14px;max-width:66ch} .doc ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .doc ul li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:var(--ink-600);max-width:64ch} .doc ul li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brand-500)} .doc a{color:var(--brand-700);font-weight:600} .doc a:hover{text-decoration:underline} .doc strong{color:var(--ink-800)} .doc-updated{font-size:13.5px;color:var(--ink-400);margin:0 0 6px} .doc-note{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-lg);padding:16px 18px;margin:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--brand-800)} .doc-todo{background:#FFF7E6;border:1px solid #F0D9A8;border-radius:var(--r-lg);padding:14px 16px;margin:0 0 22px;font-size:14px;line-height:1.6;color:#7A5A12} .value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:6px 0 10px} .value-card{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)} .value-card .v-ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--brand-50);display:grid;place-items:center;color:var(--brand-600);margin-bottom:12px} .value-card .v-ico svg{width:22px;height:22px} .value-card h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink-900)} .value-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-500);max-width:none} .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 10px} .contact-card{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)} .contact-card .v-ico{width:42px;height:42px;border-radius:var(--r-md);background:var(--brand-50);display:grid;place-items:center;color:var(--brand-600);margin-bottom:14px} .contact-card .v-ico svg{width:22px;height:22px} .contact-card h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink-900)} .contact-card p{margin:0 0 4px;font-size:14.5px;line-height:1.55;color:var(--ink-500);max-width:none} .contact-card a{font-size:15px;font-weight:600;color:var(--brand-700)} .page-cta{background:var(--surface-100);border-top:1px solid var(--border);text-align:center;padding:clamp(40px,6vw,64px) var(--gutter)} .page-cta h2{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(22px,3vw,32px);letter-spacing:-.025em;color:var(--ink-900);margin:0 0 10px} .page-cta h2 .ac{color:var(--brand-500)} .page-cta p{max-width:520px;margin:0 auto 22px;color:var(--ink-500);font-size:15.5px;line-height:1.6} /* ========================================================================== Blog / Ratgeber — Übersicht (blog) + Artikel (blog/) ========================================================================== */ .blog-wrap{max-width:var(--container);margin:0 auto;padding:clamp(6px,2vw,18px) var(--gutter) clamp(48px,7vw,84px)} /* Aufmacher / Featured */ .blog-featured{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(18px,3vw,40px);align-items:center; background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--shadow-sm);margin-bottom:clamp(30px,4vw,48px)} .bf-media{aspect-ratio:1200/630;background:var(--surface-100)} .bf-media img{width:100%;height:100%;object-fit:cover;display:block} .bf-body{padding:clamp(22px,3vw,40px) clamp(24px,3vw,44px) clamp(24px,3vw,40px) 0} @media(max-width:820px){.blog-featured{grid-template-columns:1fr}.bf-body{padding:22px 24px 30px}} .blog-cat{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill); background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-700); font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .bf-body h2{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em; line-height:1.1;color:var(--ink-900);margin:14px 0 12px;text-wrap:balance} .bf-body h2 a{color:inherit} .bf-body h2 a:hover{color:var(--brand-700)} .bf-body>p{font-size:16px;line-height:1.6;color:var(--ink-500);margin:0 0 16px;max-width:52ch} .blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;font-size:13px;color:var(--ink-400)} .blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-300)} .bf-more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:700;color:var(--brand-700); transition:gap var(--t) var(--ease)} .bf-more svg{width:18px;height:18px} .bf-more:hover{gap:11px} /* Karten-Raster */ .blog-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px} .blog-sec-head h2{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;color:var(--ink-900);margin:0} .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:clamp(18px,2.4vw,26px)} .blog-card{display:flex;flex-direction:column;background:var(--surface-0);border:1px solid var(--border); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)} .blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .bc-media{aspect-ratio:1200/630;background:var(--surface-100)} .bc-media img{width:100%;height:100%;object-fit:cover;display:block} .bc-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .bc-body h3{font-family:var(--font-grotesk);font-weight:700;font-size:18.5px;letter-spacing:-.02em; line-height:1.24;color:var(--ink-900);margin:12px 0 8px;text-wrap:balance} .bc-body h3 a{color:inherit} .bc-body h3 a:hover{color:var(--brand-700)} .bc-body>p{font-size:14.5px;line-height:1.55;color:var(--ink-500);margin:0 0 14px} .bc-body .blog-meta{margin-top:auto} .blog-card.soon{opacity:.72} .blog-card.soon:hover{transform:none;box-shadow:var(--shadow-sm)} .bc-ph{width:100%;height:100%;display:grid;place-items:center; background:radial-gradient(120% 130% at 50% 0%,#E7F8EC 0%,transparent 68%),var(--surface-100)} .bc-ph svg{width:52px;height:52px;color:var(--brand-300)} .soon-tag{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);background:var(--surface-200); color:var(--ink-500);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} /* --------------------------- Artikel --------------------------- */ .article{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-400);padding:clamp(14px,2vw,22px) 0 0} .breadcrumb a{color:var(--ink-500);font-weight:600} .breadcrumb a:hover{color:var(--brand-700)} .breadcrumb .sep{color:var(--ink-300)} .breadcrumb [aria-current]{color:var(--ink-600)} .article-head{max-width:820px;margin:0 auto;padding:clamp(16px,2vw,22px) 0 0;text-align:center} .article-head .blog-cat{margin-bottom:16px} .article-head h1{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(28px,4.4vw,46px);letter-spacing:-.035em; line-height:1.07;color:var(--ink-900);margin:0 auto 16px;max-width:16ch;text-align:center;text-wrap:balance} .article-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--ink-400);margin:0 0 14px} .article-author{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-700);margin:0 0 18px} .article-sub{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--ink-500);max-width:60ch;margin:0 auto} .am-author{display:inline-flex;align-items:center;gap:8px;color:var(--ink-700);font-weight:600} .am-ava{width:27px;height:27px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-size:11.5px;font-weight:800} .article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-300)} .article-meta time strong{color:var(--ink-600);font-weight:600} .article-figure{max-width:960px;margin:clamp(22px,3.5vw,38px) auto 0;border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--border);box-shadow:var(--shadow-sm);aspect-ratio:1200/630;background:var(--surface-100)} .article-figure img{width:100%;height:100%;object-fit:cover;display:block} /* Inline product screenshots inside the article body (no crop, with caption) */ figure.article-shot{margin:clamp(24px,3.6vw,38px) 0} figure.article-shot img{width:100%;height:auto;display:block;border-radius:var(--r-lg,14px); border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface-100)} figure.article-shot figcaption{margin-top:10px;font-size:.9rem;line-height:1.5;text-align:center; color:var(--ink-500,#5b6774)} /* Comparison table inside article body */ .article-body .table-wrap{overflow-x:auto;margin:clamp(18px,2.6vw,28px) 0;-webkit-overflow-scrolling:touch} .cmp-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:540px} .cmp-table th,.cmp-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.45} .cmp-table thead th{font-weight:700;color:var(--ink-900,#141414);background:var(--surface-100);border-bottom:2px solid var(--border)} .cmp-table tbody tr:last-child td{border-bottom:none} .cmp-table tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-100) 45%, transparent)} .article-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto; padding:clamp(26px,4vw,46px) 0 clamp(36px,6vw,64px)} @media(min-width:1080px){ .article-layout{grid-template-columns:236px minmax(0,720px);gap:clamp(40px,4vw,60px);max-width:1040px;justify-content:center;align-items:start} .toc{position:sticky;top:92px} } @media(min-width:1240px){ .article-layout{grid-template-columns:296px minmax(0,720px);max-width:1100px;transform:translateX(-30px)} } /* Inhaltsverzeichnis */ .toc{align-self:start} .toc-inline{display:none} .toc-inner{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-0);padding:16px 16px;box-shadow:var(--shadow-xs)} .toc-inner>span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400);margin:0 4px 10px} .toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .toc a{display:block;padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.35;color:var(--ink-500);font-weight:500;border-left:2px solid transparent} .toc a:hover{background:var(--surface-100);color:var(--ink-800)} .toc a.active{color:var(--brand-700);background:var(--brand-50);border-left-color:var(--brand-500);font-weight:600} @media(max-width:1079px){ .toc-desktop{display:none} .toc-inline{display:block} .toc{margin-bottom:26px} .toc-inner{background:var(--surface-100)} .toc-inner>span{cursor:pointer} .toc-mobile[open] .toc-inner>span::after{content:" ▲"} .toc-mobile:not([open]) .toc-inner>span::after{content:" ▼"} } .article-body{font-size:17px;line-height:1.75;color:var(--ink-600)} .article-body>p{margin:0 0 18px;max-width:68ch} .article-body h2{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.025em; line-height:1.16;color:var(--ink-900);margin:clamp(34px,4.5vw,48px) 0 14px;scroll-margin-top:92px;text-wrap:balance} .article-body h3{font-size:19px;font-weight:700;color:var(--ink-800);margin:28px 0 10px;scroll-margin-top:92px} .article-body a{color:var(--brand-700);font-weight:600;text-decoration:underline;text-underline-offset:2px} .article-body strong{color:var(--ink-800)} .article-body ul,.article-body ol{margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px} .article-body ul{list-style:none} .article-body ul li{position:relative;padding-left:28px;max-width:66ch} .article-body ul li::before{content:"";position:absolute;left:5px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--brand-500)} .article-body ol{list-style:none;counter-reset:steps} .article-body ol>li{position:relative;padding-left:42px;max-width:66ch;counter-increment:steps;min-height:28px} .article-body ol>li::before{content:counter(steps);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%; background:var(--brand-50);border:1px solid var(--brand-200);color:var(--brand-700);font-size:13px;font-weight:800; display:grid;place-items:center;font-family:var(--font-ui)} .callout{display:flex;gap:13px;background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-lg);padding:17px 20px;margin:24px 0} .callout .co-ico{flex:0 0 auto;width:22px;height:22px;color:var(--brand-600);margin-top:1px} .callout p{margin:0;font-size:15px;line-height:1.6;max-width:none;color:var(--ink-700)} .callout strong{color:var(--brand-800)} .answer-box{background:var(--surface-0);border:1px solid var(--border-strong);border-left:4px solid var(--brand-500); border-radius:var(--r-lg);padding:18px 22px;margin:0 0 26px;box-shadow:var(--shadow-xs)} .answer-box .ab-label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-700);margin:0 0 8px} .answer-box .ab-label svg{width:15px;height:15px} .answer-box p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-700);max-width:none} .article-faq{max-width:760px;margin:0 auto;padding:clamp(8px,2vw,18px) var(--gutter) 0} .article-faq h2{font-family:var(--font-grotesk);font-weight:800;font-size:clamp(23px,2.6vw,30px);letter-spacing:-.025em;color:var(--ink-900);margin:0 0 6px;text-align:center} .article-faq .af-sub{text-align:center;color:var(--ink-500);font-size:15px;margin:0 0 20px} .author-box{display:flex;gap:16px;align-items:flex-start;max-width:720px;margin:clamp(30px,4vw,44px) auto 0; padding:22px 24px;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .au-ava{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:grid;place-items:center;font-size:18px;font-weight:800} .author-box h3{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--ink-900)} .author-box p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-500);max-width:none} .article-foot{max-width:720px;margin:24px auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .back-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--brand-700)} .back-link svg{width:18px;height:18px} .back-link:hover{gap:10px}