:root {
  --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d;
  --color-accent: #ec3013; --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;
  --color-accent-100:#fff2ef; --color-accent-200:#ffe0d9; --color-accent-300:#ffc4b8;
  --color-accent-400:#ff9783; --color-accent-500:#ff563c; --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800; --color-accent-800:#7c1405; --color-accent-900:#4d170e;
  --font-heading:"Archivo", system-ui, sans-serif; --font-heading-weight:800;
  --font-body:"Archivo", system-ui, sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:0px; --radius-md:0px; --radius-lg:0px;
  --shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:15px; line-height:1.55; font-weight:400; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:var(--font-heading-weight); line-height:1.12; letter-spacing:-0.015em; margin:0 0 var(--space-2); }
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px} h4{font-size:20px}
p { margin:0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset:3px; }
img { display:block; max-width:100%; }
:focus { outline:none; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px; line-height:1.2;
  color:var(--color-text); background:transparent; border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3) * 1.2); border-radius:var(--radius-md); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-ghost { color:var(--color-accent); }
.tag { display:inline-flex; align-items:center; font-size:11px; letter-spacing:.02em; padding:3px 10px; border-radius:0; }
.tag-neutral { background:var(--color-neutral-100); color:var(--color-neutral-800); }
.tag-accent { background:var(--color-accent-100); color:var(--color-accent-800); }
.input { width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px; color:var(--color-text);
  caret-color:var(--color-accent); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:0; }
.field > label { display:block; font-size:12px; margin-bottom:5px; color:color-mix(in srgb,var(--color-text) 70%,transparent); }


:root {
  --l: 28px; --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 60ch;
  --ink: var(--color-text);
  --ink-muted: color-mix(in srgb, var(--color-text) 76%, transparent);
  --ink-quiet: color-mix(in srgb, var(--color-text) 72%, transparent);
  --hair: color-mix(in srgb, var(--color-text) 20%, transparent);
  --mark: var(--color-neutral-500);
  --field: var(--color-neutral-100);
  --live: var(--color-accent);
  --live-ink: var(--color-accent-700);
  --live-tint: var(--color-accent-100);
  --live-tint-ink: var(--color-accent-800);
}
html[data-theme="dark"] {
  --color-bg: #17100f; --color-surface: #201e1d; --color-text: #f4f1f0;
  --color-divider: color-mix(in srgb, #f4f1f0 40%, transparent);
  --ink-muted: color-mix(in srgb, #f4f1f0 78%, transparent);
  --ink-quiet: color-mix(in srgb, #f4f1f0 58%, transparent);
  --hair: color-mix(in srgb, #f4f1f0 24%, transparent);
  --mark: #7d7979;
  --field: #221d1c;
  --live: #ff563c;
  --live-ink: #ff9783;
  --live-tint: #3a1a14;
  --live-tint-ink: #ffc4b8;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-bg: #17100f; --color-surface: #201e1d; --color-text: #f4f1f0;
    --color-divider: color-mix(in srgb, #f4f1f0 40%, transparent);
    --ink-muted: color-mix(in srgb, #f4f1f0 78%, transparent);
    --ink-quiet: color-mix(in srgb, #f4f1f0 58%, transparent);
    --hair: color-mix(in srgb, #f4f1f0 24%, transparent);
    --mark: #7d7979;
    --field: #221d1c;
    --live: #ff563c;
    --live-ink: #ff9783;
    --live-tint: #3a1a14;
    --live-tint-ink: #ffc4b8;
  }
}
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-text) 18%, transparent); }
a { color: var(--color-text); }
a:hover { color: var(--ink-muted); }
[data-l] { display: none; }
html[data-lang="de"] [data-l="de"], html[data-lang="en"] [data-l="en"] { display: revert; }
html[data-lang="de"] [data-langbtn="de"], html[data-lang="en"] [data-langbtn="en"] { background: var(--color-text) !important; color: var(--color-bg) !important; }
@media (max-width: 1080px) { header nav { display: none !important; } }
@media (max-width: 900px) { [data-r="2"], [data-r="3"] { grid-template-columns: minmax(0, 1fr) !important; } }

/* --- product-shot chrome --- */
.device{width:100%;max-width:960px;background:var(--color-bg);border:1px solid var(--hair);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 28px -8px rgba(0,0,0,.14),0 36px 64px -24px rgba(0,0,0,.18)}
.chrome{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--field);border-bottom:1px solid var(--hair)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--hair);flex:0 0 auto;display:block}
.chrome .url{flex:1;text-align:center;font-size:11.5px;letter-spacing:.02em;color:var(--ink-quiet);background:var(--color-bg);border:1px solid var(--hair);border-radius:20px;padding:3px 12px;max-width:320px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device>div:not(.chrome){border:0!important}
.shot-cap{margin:0;max-width:56ch;text-align:center;font-size:14.5px;line-height:var(--l);color:var(--ink-muted)}

/* --- MacBook Pro --- */
.mac{width:100%;max-width:1060px;margin:0 auto;filter:drop-shadow(0 34px 44px rgba(0,0,0,.22))}
.mac-lid{position:relative;background:#1f1f21;border:1px solid #3a3a3d;border-radius:18px 18px 5px 5px;padding:17px 13px 15px}
.mac-notch{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:128px;height:16px;background:#0a0a0b;border-radius:0 0 10px 10px;z-index:3}
.mac-notch::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#26262a}
.mac-screen{position:relative;background:var(--color-bg);border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mac-base{position:relative;width:116%;margin-left:-8%;height:13px;background:linear-gradient(#cfcfd5 0%,#b4b4bc 48%,#94949d 100%);border-radius:0 0 13px 13px}
.mac-base::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(0,0,0,.38)}
.mac-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:108px;height:8px;background:#9a9aa2;border-radius:0 0 9px 9px}
.mac-foot{width:74%;height:16px;margin:0 auto;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.22),rgba(0,0,0,0) 70%)}
.mac .chrome{background:#ececed;border-bottom:1px solid #d8d8da}
.mac .chrome i:nth-child(1){background:#ff5f57}
.mac .chrome i:nth-child(2){background:#febc2e}
.mac .chrome i:nth-child(3){background:#28c840}
.mac .chrome .url{background:#fff;border-color:#dcdcde;color:#6b6b70}
@media (max-width:700px){.mac-lid{padding:12px 8px 10px;border-radius:12px 12px 4px 4px}.mac-notch{width:84px;height:12px}.mac-base{height:9px}}

/* --- fresh palette --- */
:root{--c-flame:#FF5A38;--c-amber:#FFA12E;--c-teal:#10B5AE;--c-ink:#0F141C;
 --grad:linear-gradient(96deg,#FF5A38 0%,#FF7E35 48%,#FFA12E 100%);
 --grad-soft:linear-gradient(96deg,rgba(255,90,56,.12),rgba(255,161,46,.10));}
.grad-num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not (background-clip:text){.grad-num{color:var(--c-flame);-webkit-text-fill-color:currentColor}}

/* hero: soft colour wash + rounder, bolder buttons */
.hero-head::before{content:"";position:absolute;inset:-10% -50% 30%;z-index:-1;pointer-events:none;
 background:radial-gradient(46% 60% at 22% 24%,rgba(255,90,56,.17),transparent 68%),
            radial-gradient(42% 56% at 80% 16%,rgba(16,181,174,.15),transparent 70%),
            radial-gradient(40% 50% at 55% 76%,rgba(255,161,46,.13),transparent 72%)}

/* full-bleed ink bands, painted behind the section */
.band{position:relative;isolation:isolate}
.band::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1}
#moment.band::before{background:radial-gradient(70% 120% at 12% 0%,#1B2436,#0F141C 60%)}
#grenzen.band::before{background:radial-gradient(80% 130% at 84% 6%,#2A1A19,#12100F 62%)}
#moment.band,#grenzen.band{--color-text:#F3F6F8;--ink-muted:rgba(243,246,248,.80);--ink-quiet:rgba(243,246,248,.56);
 --hair:rgba(243,246,248,.17);--color-divider:rgba(243,246,248,.30);--color-bg:#141A23;--field:#1A2130;
 --live-ink:#FF8A62;--live-tint:rgba(255,90,56,.16);--live-tint-ink:#FFC0AC;color:#F3F6F8}
#moment.band{background:transparent!important}
#grenzen.band{background:transparent!important;color:#F3F6F8!important}

/* teal band for the self-checking section */
#pruefung.tealband{position:relative;isolation:isolate}
#pruefung.tealband::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;z-index:-1;
 background:linear-gradient(168deg,rgba(16,181,174,.13),rgba(16,181,174,.04) 55%,transparent)}

/* cards & shots get Apple-ish softness */
.device{border-radius:14px!important}
.mac-screen{border-radius:6px!important}

/* --- two-column hero --- */
.hero-wrap{max-width:1320px;margin:0 auto;padding:calc(1.9 * var(--l)) var(--edge) calc(2.2 * var(--l));
 display:grid;grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr);gap:clamp(30px,4vw,68px);align-items:center;position:relative}
.hero-wrap::before{content:"";position:absolute;inset:-14% -40% -10%;z-index:-1;pointer-events:none;
 background:radial-gradient(44% 58% at 16% 26%,rgba(255,90,56,.18),transparent 68%),
            radial-gradient(40% 54% at 86% 22%,rgba(16,181,174,.16),transparent 70%),
            radial-gradient(38% 48% at 58% 88%,rgba(255,161,46,.14),transparent 72%)}
.hero-claim{display:grid;gap:var(--space-4);justify-items:start;text-align:left}
.hero-claim h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,4.3vw,58px);line-height:1;letter-spacing:-0.03em;margin:2px 0 4px -0.05em;max-width:14ch}
.hero-claim .btn{border-radius:999px!important;padding:12px 24px!important;font-size:15px!important;border:0!important}
.hero-claim .btn:first-child{background:var(--grad)!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(255,90,56,.6)}
.hero-claim .btn.btn-ghost{background:transparent!important;border:2px solid var(--hair)!important;color:var(--color-text)!important}
.hero-shot{display:grid;gap:var(--space-4);min-width:0}
/* flow inside the screen */
@media(max-width:940px){.hero-wrap{grid-template-columns:minmax(0,1fr);gap:calc(1.6 * var(--l))}.hero-claim h1{max-width:18ch}}

/* --- punchier hero + life --- */
.hero-claim h1{font-size:clamp(33px,4.1vw,54px)!important;line-height:1.02!important;max-width:17ch!important}
.hero-claim .h2line{margin:0;font-family:var(--font-heading);font-weight:800;font-size:clamp(17px,1.9vw,23px);line-height:1.35;letter-spacing:-0.012em;color:var(--ink-muted)}
.hero-claim .h2line b{color:var(--color-text)}
@keyframes noPulse{0%,30%,100%{box-shadow:0 0 0 0 rgba(255,90,56,0)}6%{box-shadow:0 0 0 5px rgba(255,90,56,.30)}16%{box-shadow:0 0 0 0 rgba(255,90,56,0)}}
.d1 .no{animation-delay:0s}.d2 .no{animation-delay:1.1s}.d3 .no{animation-delay:2.2s}.d4 .no{animation-delay:3.3s}.d5 .no{animation-delay:4.4s}
.caret{display:inline-block;width:2px;height:1em;background:var(--c-flame);margin-left:2px;vertical-align:-2px;animation:blink 1.05s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.dots span{animation:dot 1.4s ease-in-out infinite;opacity:.3}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}
/* --- testimonials --- */
.tcard{background:var(--color-bg);border:1px solid var(--hair);border-radius:16px;padding:var(--l);display:grid;gap:var(--space-3);align-content:start;box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -18px rgba(0,0,0,.18)}
.tcard .mark{font-family:var(--font-heading);font-weight:800;font-size:34px;line-height:.7;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tcard .q{margin:0;font-size:16px;line-height:1.5;color:var(--color-text)}
.tcard .who{margin:0;font-size:12.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-quiet);border-top:1px solid var(--hair);padding-top:var(--space-3)}

/* --- SaaS hero, Apple spacing --- */
.hero-wrap{align-items:start!important;padding-top:calc(2.2 * var(--l))!important}
.hero-claim{gap:var(--space-3)!important;padding-top:calc(0.8 * var(--l))}
.hero-claim h1{font-size:clamp(36px,4.7vw,62px)!important;line-height:1.02!important;max-width:15ch!important;text-wrap:balance;margin:6px 0 2px -0.05em!important}
.kihook{margin:0;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.5;color:var(--c-flame);font-weight:600;max-width:40ch}
.hero-claim h2.h2line{font-family:var(--font-heading);font-weight:800;font-size:clamp(16.5px,1.8vw,21px);line-height:1.4;letter-spacing:-0.01em;color:var(--ink-muted);margin:0;max-width:34ch;text-wrap:pretty}
.price-anchor{margin:var(--space-2) 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-quiet)}
.price-anchor b{color:var(--color-text);font-weight:700}
.mac-base{width:110%!important;margin-left:-5%!important}
/* trust strip */
.trust{max-width:1320px;margin:0 auto;padding:0 var(--edge) calc(1.7 * var(--l));display:flex;align-items:center;gap:var(--space-3) clamp(16px,2.4vw,32px);flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:var(--l);margin-top:var(--space-2)}
.trust .lead{font-size:12px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-quiet)}
.trust .who{font-family:var(--font-heading);font-weight:800;font-size:14.5px;letter-spacing:-0.005em;color:var(--ink-muted)}
.trust .sep{width:5px;height:5px;border-radius:50%;background:var(--c-flame);opacity:.55}

/* --- Apple-style glass nav --- */
header{background:color-mix(in srgb,var(--color-bg) 76%,transparent)!important;
 -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
 border-bottom:1px solid var(--hair)!important}
@supports not (backdrop-filter:blur(1px)){header{background:var(--color-bg)!important}}

/* --- before / after mock inside the screen --- */
.mock{border:1px solid var(--hair);border-radius:9px;overflow:hidden;background:var(--color-bg)}

/* --- columns balanced --- */
.hero-wrap{align-items:center!important;gap:clamp(26px,3.4vw,56px)!important}
.hero-shot{align-self:center}
/* --- a real-looking site inside the screen --- */
.site{background:var(--color-bg)}
.sbar{display:flex;align-items:center;gap:13px;padding:9px 13px;border-bottom:1px solid var(--hair)}
.slogo{font-family:var(--font-heading);font-weight:800;font-size:13.5px;letter-spacing:-0.025em}
.snav{display:flex;gap:11px;font-size:11px;color:var(--ink-quiet)}
.sbtn{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--color-text);color:var(--color-bg);border-radius:99px;padding:4px 11px}
.stitle{padding:12px 13px 9px;font-family:var(--font-heading);font-weight:800;font-size:14.5px;letter-spacing:-0.018em}
.chipbar{display:flex;gap:7px;align-items:center;padding:0 13px 10px;flex-wrap:wrap;animation:popin 7s ease-in-out infinite}
@keyframes popin{0%{opacity:.2;transform:translateY(-7px)}9%,86%{opacity:1;transform:none}97%,100%{opacity:.2;transform:translateY(-7px)}}
.chip{font-size:10.5px;font-weight:700;border-radius:99px;padding:5px 10px;border:1px solid var(--hair);color:var(--ink-quiet);white-space:nowrap}
.chip.on{background:var(--grad);color:#fff;border-color:transparent}
.chipnew{font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#fff;background:var(--c-flame);border-radius:99px;padding:3px 7px;animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,9%{box-shadow:0 0 0 6px rgba(255,90,56,.28)}22%,100%{box-shadow:0 0 0 0 rgba(255,90,56,0)}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:0 13px 13px}
.pcard{border:1px solid var(--hair);border-radius:9px;overflow:hidden;background:var(--color-bg)}
.pcard .ph{height:50px}
.ph1{background:linear-gradient(158deg,#8fb6bd,#c2d1bb 58%,#e7dcc6)}
.ph2{background:linear-gradient(158deg,#a8bdd2,#d2cbc0 55%,#efe2cf)}
.ph3{background:linear-gradient(158deg,#c0b2c8,#dccec4 55%,#f0ddca)}
.pcard .nm{font-size:11px;font-weight:700;padding:7px 8px 1px;letter-spacing:-0.01em}
.pcard .pr{font-size:10px;color:var(--ink-quiet);padding:0 8px 8px}
@media(max-width:520px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pcard:last-child{display:none}}

/* --- split screen: site + chat --- */
.scr2{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);min-height:0}
.sitecol{min-width:0;border-right:1px solid var(--hair)}
.chatcol{min-width:0;background:var(--field);display:flex;flex-direction:column}
.chead{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--hair);font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:-0.01em}
.chead .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.chead .st{font-family:var(--font-body);font-weight:400;font-size:10.5px;color:var(--ink-quiet);margin-left:auto}
.cmsgs{display:grid;gap:9px;padding:12px;align-content:start;flex:1}
.cm{display:grid;gap:3px;max-width:94%}
.cm p{margin:0;font-size:12px;line-height:1.42;padding:8px 10px;border-radius:12px}
.cm time{font-size:9.5px;color:var(--ink-quiet);letter-spacing:.03em}
.cm.me{justify-self:end;text-align:right}
.cm.me p{background:var(--color-text);color:var(--color-bg);border-bottom-right-radius:4px;font-weight:600;text-align:left}
.cm.bot p{background:var(--color-bg);border:1px solid var(--hair);border-bottom-left-radius:4px;color:var(--ink-muted)}
.cm.ok p{background:var(--live-tint);border-color:transparent;color:var(--live-tint-ink);font-weight:700}
.cinput{display:flex;align-items:center;gap:6px;margin:0 12px 12px;padding:8px 11px;border:1px solid var(--hair);border-radius:99px;background:var(--color-bg);font-size:11px;color:var(--ink-quiet)}
/* the change actually reflows the page */
.chipwrap{overflow:hidden;animation:reveal 9s ease-in-out infinite}
@keyframes reveal{0%,78%{max-height:46px;opacity:1}84%,90%{max-height:0;opacity:0}100%{max-height:46px;opacity:1}}
.chipbar{animation:none!important}
.chipnew{animation:glow 9s ease-in-out infinite}
@keyframes glow{0%,6%{box-shadow:0 0 0 7px rgba(255,90,56,.30)}18%,89%{box-shadow:0 0 0 0 rgba(255,90,56,0)}96%,100%{box-shadow:0 0 0 7px rgba(255,90,56,.30)}}
@media(max-width:760px){.scr2{grid-template-columns:minmax(0,1fr)}.sitecol{border-right:0;border-bottom:1px solid var(--hair)}}

/* --- one synchronised 12s loop: chat builds up, then the filter lands --- */
.chipwrap{animation:revealsync 12s ease-in-out infinite!important}
@keyframes revealsync{0%,70%{max-height:46px;opacity:1}73%,93%{max-height:0;opacity:0}98%,100%{max-height:46px;opacity:1}}
.chipnew{animation:glowsync 12s ease-in-out infinite!important}
@keyframes glowsync{0%,4%{box-shadow:0 0 0 7px rgba(255,90,56,.32)}14%,96%{box-shadow:0 0 0 0 rgba(255,90,56,0)}100%{box-shadow:0 0 0 7px rgba(255,90,56,.32)}}
.cm{animation-duration:12s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.s1{animation-name:seq1}.s2{animation-name:seq2}.s3{animation-name:seq3}.s4{animation-name:seq4}
@keyframes seq1{0%,70%{opacity:1;transform:none}73%,75%{opacity:0;transform:translateY(7px)}79%,100%{opacity:1;transform:none}}
@keyframes seq2{0%,70%{opacity:1;transform:none}73%,81%{opacity:0;transform:translateY(7px)}85%,100%{opacity:1;transform:none}}
@keyframes seq3{0%,70%{opacity:1;transform:none}73%,87%{opacity:0;transform:translateY(7px)}91%,100%{opacity:1;transform:none}}
@keyframes seq4{0%,70%{opacity:1;transform:none}73%,93%{opacity:0;transform:translateY(7px)}98%,100%{opacity:1;transform:none}}
.cinput .caret{animation:blink 1.05s step-end infinite}
@media (prefers-reduced-motion:reduce){.chipwrap,.chipnew,.cm,.cinput .caret{animation:none!important;max-height:none!important;opacity:1!important;transform:none!important}}

/* --- "Das bekommen Sie": five cards, one row --- */
#bekommen{max-width:1340px!important}
.getgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.getgrid>div{background:var(--color-bg);border:1px solid var(--hair);border-radius:14px;padding:18px 16px 20px;display:grid;gap:9px;align-content:start;min-width:0}
.getgrid svg{width:23px;height:23px}
.getgrid .gt{margin:0;font-family:var(--font-heading);font-weight:800;font-size:15.5px;line-height:1.24;letter-spacing:-0.012em;text-wrap:balance}
.getgrid .gb{margin:0;font-size:13px;line-height:1.46;color:var(--ink-muted);text-wrap:pretty}
@media(max-width:1120px){.getgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.getgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.getgrid{grid-template-columns:minmax(0,1fr)}}

/* --- simple pricing --- */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);align-items:stretch}
.pkg{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-bg);border:1px solid var(--hair);border-radius:18px;padding:calc(1.1 * var(--l)) var(--l) var(--l);min-width:0}
.pkg.main{border:2px solid var(--c-flame);box-shadow:0 18px 40px -24px rgba(255,90,56,.55)}
.pkg .tag{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-quiet);font-weight:700}
.pkg.main .tag{color:var(--c-flame)}
.pkg h3{margin:0;font-family:var(--font-heading);font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-0.018em}
.pkg .amt{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,3.4vw,40px);line-height:1;letter-spacing:-0.03em;font-feature-settings:'tnum' 1;margin:2px 0 0}
.pkg .per{font-size:13.5px;color:var(--ink-quiet);margin:5px 0 0}
.pkg .lead{margin:var(--space-2) 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
.pkg ul{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:9px}
.pkg li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px;font-size:14px;line-height:1.45;color:var(--ink-muted)}
.pkg li b{color:var(--color-text);font-weight:600}
.pkg li .ck{width:15px;height:15px;border-radius:50%;background:var(--grad);color:#fff;font-size:9px;line-height:15px;text-align:center;font-weight:800;margin-top:3px}
.pkg .fine{margin:var(--space-3) 0 0;padding-top:var(--space-3);border-top:1px solid var(--hair);font-size:12.5px;line-height:1.5;color:var(--ink-quiet)}
.pkg .go{margin-top:auto;padding-top:var(--l)}
.pkg .go .btn{border-radius:999px!important;width:100%;text-align:center;border:0!important;padding:11px 18px!important;font-size:14.5px!important}
.pkg.main .go .btn{background:var(--grad)!important;color:#fff!important}
.pkg .go .btn.btn-ghost{background:transparent!important;border:2px solid var(--hair)!important;color:var(--color-text)!important}
@media(max-width:900px){.pkgs{grid-template-columns:minmax(0,1fr)}}

.qbox{margin:var(--l) 0 0;padding-left:var(--l);border-left:3px solid var(--c-flame)}
.qbox p{margin:0;font-size:15.5px;line-height:1.5;color:var(--color-text)}
.qbox .who{margin:8px 0 0;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-quiet)}
.ftr{border-top:2px solid var(--color-divider);margin-top:calc(2 * var(--l))}
.ftrin{max-width:1340px;margin:0 auto;padding:calc(1.6 * var(--l)) var(--edge) calc(2 * var(--l));display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--l) clamp(20px,3vw,48px)}
.ftrin h4{margin:0 0 9px;font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-quiet)}
.ftrin p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-muted)}
.ftrin a{color:var(--ink-muted)}
.todo{background:var(--live-tint);color:var(--live-tint-ink);border-radius:4px;padding:0 5px;font-weight:700}
.formnote{margin:var(--space-3) 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-quiet)}

/* --- Ablauf-Zeitleiste --- */
.phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.ph{min-width:0}
.phh{display:flex;align-items:baseline;gap:10px;margin:0 0 var(--space-3)}
.phh .n{font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:.08em;color:#fff;background:var(--grad);border-radius:99px;padding:3px 9px}
.phh .t{font-family:var(--font-heading);font-weight:800;font-size:17.5px;letter-spacing:-0.014em}
.phh .s{font-size:13px;color:var(--ink-quiet);margin-left:auto;white-space:nowrap}
.tlrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 14px;padding:11px 0;border-top:1px solid var(--hair);align-items:start}
.tlrow:last-child{border-bottom:1px solid var(--hair)}
.tlrow .tm{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:12.5px;font-weight:700;color:var(--c-flame);padding-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.tlrow b{display:block;font-family:var(--font-heading);font-weight:800;font-size:15px;line-height:1.3;letter-spacing:-0.01em}
.tlrow em{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--ink-muted);margin-top:3px}
.tlend{margin:calc(1.4 * var(--l)) 0 0;padding:var(--l);border-radius:16px;background:var(--live-tint);color:var(--live-tint-ink);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tlend b{font-family:var(--font-heading);font-weight:800;font-size:clamp(18px,2.2vw,25px);letter-spacing:-0.015em}
.tlend span{font-size:14.5px;line-height:1.5}
@media(max-width:820px){.phases{grid-template-columns:minmax(0,1fr)}}


/* --- Sprache & Fokus (im Canvas vom Bundle erledigt) --- */
html[data-lang="de"] [data-l="en"],html[data-lang="en"] [data-l="de"]{display:none}
[data-langbtn]{transition:none}
html[data-lang="de"] [data-langbtn="de"],html[data-lang="en"] [data-langbtn="en"]{background:var(--color-text)!important;color:var(--color-bg)!important}
#brief:focus{border-color:var(--color-text);outline:none}
.input:focus,textarea:focus{outline:none}


/* --- Handy: Kopfzeile passt, Tippziele gross genug --- */
@media (max-width:860px){
  header nav{display:none!important}
  header > div{gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  header .btn{padding:10px 14px!important;font-size:13px!important;min-height:44px}
  [data-langbtn]{min-height:44px;min-width:44px;padding:0 10px!important}
  header button[aria-label="Theme"]{min-height:44px;padding:0 12px!important}
}
@media (max-width:430px){
  header a[href="#top"]{font-size:17px!important}
  header .btn span[data-l="de"]::after{content:""}
}
.ftrin a{display:inline-block;padding:6px 0;min-height:34px}
.hero-claim .btn,.pkg .go .btn{min-height:46px}
.legal-wrap{max-width:78ch;margin:0 auto;padding:calc(2 * var(--l)) var(--edge) calc(3 * var(--l))}
.legal-wrap h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(28px,5vw,40px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 var(--l)}
.legal-wrap h2{font-family:var(--font-heading);font-weight:800;font-size:19px;margin:calc(1.4 * var(--l)) 0 var(--space-3)}
.legal-wrap p{margin:0 0 var(--space-4);font-size:15.5px;line-height:1.7;color:var(--ink-muted)}
.legal-wrap strong{color:var(--color-text)}
.legal-back{display:inline-block;margin-bottom:var(--l);font-size:14px;color:var(--ink-quiet);text-decoration:none}
.legal-back:hover{color:var(--color-text)}

/* --- Handy: Kopfzeile muss in 390px passen --- */
@media (max-width:560px){
  header button[aria-label="Theme"]{display:none!important}
  header > div{gap:8px!important;padding:8px 12px!important}
  header a[href="#top"]{padding:9px 0;min-height:44px;display:inline-flex;align-items:center}
  header .btn{padding:10px 12px!important;font-size:12.5px!important;letter-spacing:-0.01em}
  [data-langbtn]{min-width:38px;padding:0 8px!important;font-size:11px!important}
}
/* Absende-Knopf und Fusszeilen-Links gross genug zum Tippen */
button[type="submit"],#formWrap .btn{min-height:46px!important}
.ftrin a{min-height:40px;display:inline-flex;align-items:center}

/* --- Handy: der Laptop darf nicht den halben Bildschirm fressen --- */
@media (max-width:760px){
  /* Im Chat bleiben nur der Wunsch und das Ergebnis stehen */
  .chatcol .cm.s2, .chatcol .cm.s3, .chatcol .cinput{display:none!important}
  .chatcol .cmsgs{padding:10px 11px!important;gap:7px!important}
  .chatcol .chead{padding:7px 11px!important;font-size:11px!important}
  .cm p{font-size:11.5px!important;padding:7px 9px!important}
  .cm time{font-size:9px!important}
  /* Die Seite darüber kompakter */
  .sbar{padding:7px 11px!important}
  .slogo{font-size:12px!important}
  .stitle{padding:9px 11px 7px!important;font-size:12.5px!important}
  .chipbar{padding:0 11px 8px!important;gap:5px!important}
  .chip{font-size:9.5px!important;padding:4px 8px!important}
  .chipnew{font-size:8px!important;padding:2px 6px!important}
  .cards{padding:0 11px 11px!important;gap:7px!important}
  .pcard .ph{height:38px!important}
  .pcard .nm{font-size:10px!important;padding:5px 6px 1px!important}
  .pcard .pr{font-size:9px!important;padding:0 6px 6px!important}
  .mac-lid{padding:11px 8px 9px!important;border-radius:12px 12px 4px 4px!important}
  .mac-notch{width:76px!important;height:11px!important}
  .chipwrap{animation-name:revealsync-s!important}
  @keyframes revealsync-s{0%,70%{max-height:34px;opacity:1}73%,93%{max-height:0;opacity:0}98%,100%{max-height:34px;opacity:1}}
  .shot-cap{font-size:13px!important;text-align:left!important}
}