/* Layout: one calm white column; the hero and the two receipt tools carry all the energy. Single light theme, on purpose (Merv brand is white). */
:root{
  --ink:#0a0a0a; --body:#3f4652; --muted:#8a919c; --line:#e5e7eb;
  --bg:#ffffff; --alt:#fafafa; --warm:#f5f1ec; --paper:#fffdf6;
  --brand:#2563eb; --brand-h:#1d4ed8; --brand-soft:#eff4ff;
  --hl:#fde68a; --hot:#e11d48; --ok:#059669;
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-bon:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--f-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;hyphens:none;-webkit-hyphens:none;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.025em}
p{margin:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Nav */
nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:18px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;line-height:0}
.brand img{display:block;height:28px;width:auto}
nav .links{display:flex;gap:22px;align-items:center;font-size:14.5px;font-weight:500}
nav .links a{color:var(--body);text-decoration:none}
nav .links a.cta{background:var(--brand);color:#fff;padding:9px 16px;border-radius:9px;font-weight:600}
@media (max-width:720px){nav .links a:not(.cta){display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:56px 72px;transition:background .5s}
.hero .wrap{position:relative}
.switchrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:40px;padding:8px 10px 8px 18px;box-shadow:4px 4px 0 var(--ink);position:relative;z-index:2}
.switch span{font-size:15px;font-weight:800}
.switch.wiggle{animation:wig 3.2s ease-in-out 1.2s infinite}
@keyframes wig{0%,84%,100%{transform:rotate(0)}87%{transform:rotate(-3deg)}90%{transform:rotate(3deg)}93%{transform:rotate(-2deg)}96%{transform:rotate(1deg)}}
.scribble{font-family:'Caveat','Comic Sans MS',cursive;font-size:26px;font-weight:700;color:var(--hot);transform:rotate(-4deg);line-height:1}
.hero.agency .switch{border-color:#4f46e5;box-shadow:4px 4px 0 #4f46e5}
.tog{width:64px;height:34px;border-radius:30px;border:0;background:#d1d5db;position:relative;cursor:pointer;transition:background .25s}
.tog::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s}
.tog[aria-checked="true"]{background:var(--hot)}
.tog[aria-checked="true"]::after{transform:translateX(30px)}
.tog small{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:10px;font-weight:800;color:#4b5563}
.tog[aria-checked="true"] small{justify-content:flex-start;padding-left:8px;color:#fff}
.hero h1{font-size:clamp(38px,6.4vw,76px);line-height:1.04;font-weight:800;max-width:15ch;margin-top:26px}
.hl{display:inline-block;position:relative;padding:0 .12em;transform:rotate(-4deg) translateY(.04em);transform-origin:center;color:var(--ink)}
.hl::before{content:"";position:absolute;left:-.04em;right:-.06em;top:.18em;bottom:.02em;background:var(--hl);border-radius:.12em .3em .18em .26em;z-index:-1;transform:skewX(-8deg)}
.hl{z-index:0;animation:drop .7s cubic-bezier(.3,1.6,.5,1) .25s both}
@keyframes drop{from{transform:rotate(8deg) translateY(-.4em);opacity:.0}to{transform:rotate(-4deg) translateY(.04em);opacity:1}}
.hero .sub{font-size:clamp(17px,2vw,20px);color:var(--body);max-width:44ch;margin-top:24px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:14px 22px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:transform .15s,background .15s}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-h);transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:#cbd0d6}
.agency-note{margin-top:18px;font-size:14px;font-weight:600;color:var(--hot)}
/* Agentur mode */
.hero.agency{background:radial-gradient(60% 80% at 15% 20%,#c7d2fe 0,transparent 60%),radial-gradient(50% 70% at 85% 30%,#fbcfe8 0,transparent 60%),radial-gradient(60% 60% at 60% 100%,#a5f3fc 0,transparent 60%),#fff}
.hero.agency h1{font-weight:300;letter-spacing:-.04em;background:linear-gradient(90deg,#4f46e5,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.agency .hl{color:#4f46e5;-webkit-text-fill-color:#4f46e5}
.hero.agency .btn.primary{background:linear-gradient(90deg,#6366f1,#ec4899);border-radius:40px;box-shadow:0 10px 30px rgba(236,72,153,.35)}
.sparkle{position:absolute;font-size:22px;color:#a78bfa;opacity:0;transition:opacity .4s;pointer-events:none}
.hero.agency .sparkle{opacity:1;animation:tw 2.4s ease-in-out infinite}
@keyframes tw{50%{transform:scale(1.4) rotate(20deg)}}
@media (max-width:720px){.hero{padding-block:24px 56px}.scribble{font-size:22px}}

/* Section shell */
section.band{padding-block:84px}
section.band.alt{background:var(--alt);border-block:1px solid var(--line)}
.head{max-width:680px;margin-bottom:40px}
.head h2{font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.08;margin-top:10px}
.head p{color:var(--body);font-size:18px;margin-top:14px}

/* Doors */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:40px}
.door{display:flex;gap:16px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;cursor:pointer;transition:border-color .2s,transform .2s}
.door:hover{transform:translateY(-2px);border-color:#cbd0d6}
.door[aria-selected="true"]{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.door .num{flex:none;width:42px;height:42px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:18px}
.door[aria-selected="true"] .num{background:var(--hl);color:var(--ink)}
.door h3{font-size:20px;font-weight:800}
.door p{color:var(--body);font-size:14.5px;margin-top:4px}
.door .tag{display:block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.door h3{font-size:21px;line-height:1.2}
.door .getlbl{display:block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.door ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.door li{position:relative;padding-left:22px;color:var(--body);font-size:15px}
.door li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:800;color:var(--ok)}
.teaser{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-bon);font-size:13px;background:var(--paper);border:1px dashed #cfc8b6;border-radius:8px;padding:6px 10px;color:#1c1c1c}
.teaser b{background:var(--hl);padding:0 4px}
@media (max-width:980px){.doors{grid-template-columns:1fr}}
.door{flex-direction:column;gap:12px}
.checks{display:grid;gap:10px;margin-top:6px}
.checks div{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.checks b{font-family:var(--f-bon);font-size:12px;color:var(--muted);min-width:22px}
.urlrow{display:flex;gap:10px;margin:4px 0 18px;flex-wrap:wrap}
.urlrow input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:var(--f-bon);font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:-16px 0 24px}
.filters button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font-weight:600;font-size:14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.card .prob{font-size:17px;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.cards{grid-template-columns:1fr!important}}

.tool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:start}
@media (max-width:900px){.tool{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0}
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.panel-top h3{font-size:19px;font-weight:800}
.example{font-size:11.5px;font-weight:700;color:#92400e;background:#fef3c7;border-radius:20px;padding:3px 10px}
.hint{color:var(--muted);font-size:13.5px;margin-bottom:16px}

/* Kassenbon editor */
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:#fff}
.step .n{font-family:var(--f-bon);font-size:12px;color:var(--muted);text-align:center}
.step input.t{border:0;background:transparent;font-size:15px;font-weight:500;min-width:0;width:100%;padding:4px 2px}
.step input.t:focus{outline:2px solid var(--brand-soft);border-radius:6px}
.mins{display:flex;align-items:center;gap:2px;font-family:var(--f-bon);font-size:13.5px}
.mins button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.mins output{min-width:46px;text-align:center}
.same{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--muted)}
.same[aria-pressed="true"]{background:var(--hl);border-color:#f3cf4a;color:var(--ink)}
@media (max-width:520px){.step{grid-template-columns:22px minmax(0,1fr);}.step .mins,.step .same{grid-column:2}.step .mins{justify-self:start}.step .same{justify-self:start;margin-top:-2px}}
.addrow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.linkbtn{background:none;border:0;color:var(--brand);font-weight:600;cursor:pointer;padding:6px 0;font-size:14.5px}
.slider{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.slider label{display:flex;justify-content:space-between;font-weight:600;font-size:14.5px}
.slider label b{font-family:var(--f-bon)}
input[type=range]{width:100%;accent-color:var(--brand);margin-top:10px}

/* Receipt */
.bon-wrap{position:sticky;top:20px;display:flex;justify-content:center}
.bon{width:100%;max-width:340px;background:var(--paper);font-family:var(--f-bon);font-size:13px;line-height:1.5;color:#1c1c1c;padding:26px 22px 30px;position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.12));transform:rotate(1.2deg);transition:transform .3s}
.bon:hover{transform:rotate(0)}
.bon::before,.bon::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 5px 0,transparent 5px,var(--paper) 5.5px) 0 0/10px 10px repeat-x}
.bon::before{top:-10px;transform:rotate(180deg)}
.bon::after{bottom:-10px}
.bon .c{text-align:center}
.bon .big{font-size:17px;font-weight:700;letter-spacing:.06em}
.bon hr{border:0;border-top:1.5px dashed #b9b4a8;margin:12px 0}
.bon .row{display:flex;justify-content:space-between;gap:10px}
.bon .row span:first-child{min-width:0;overflow-wrap:anywhere}
.bon .row span:last-child{white-space:nowrap}
.bon .star{color:#b45309}
.bon .total{font-size:15px;font-weight:700}
.bon .hit{background:var(--hl);padding:2px 4px;margin:0 -4px;display:block}
.bon .tiny{font-size:11px;color:#6b665b}
.bon .stamp{display:inline-block;border:2px solid var(--hot);color:var(--hot);font-weight:700;padding:3px 9px;transform:rotate(-6deg);margin-top:10px;font-size:12px;letter-spacing:.08em}
.flash{animation:fl .5s}
@keyframes fl{from{background:#fff3b0}to{background:transparent}}

/* Kundenbon */
.dots{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.dots button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted)}
.dots button.done{background:var(--brand-soft);border-color:#bfd2fb;color:var(--brand)}
.dots button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cust-name{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.cust-name label{font-weight:800;font-size:18px;white-space:nowrap}
.cust-name input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:14.5px}
.q{margin-bottom:16px}
.q p{font-weight:600;font-size:15px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:6px 13px;font-size:14px;cursor:pointer;font-weight:500}
.chips button:hover{border-color:#cbd0d6}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips button.dk[aria-pressed="true"]{background:#fff;color:var(--hot);border-color:var(--hot)}
.navrow{display:flex;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.count{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);font-weight:600;font-size:14.5px;flex-wrap:wrap}
.count input{width:90px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-family:var(--f-bon)}

/* Proof */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-2px);border-color:#cbd0d6}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:nowrap;min-height:44px}
.area{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.a-m{background:#eff4ff;color:#1d4ed8}.a-v{background:#ecfdf5;color:#047857}.a-a{background:#fff7ed;color:#c2410c}.a-z{background:#f5f3ff;color:#6d28d9}
.card .ind{font-size:13px;color:var(--muted);font-weight:600;text-align:right;line-height:1.35}
.card blockquote{margin:0;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.card dl{margin:0;display:grid;gap:8px}
.card dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card dd{margin:0;color:var(--body);font-size:15px}
.card .big{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}
.card .big mark{background:linear-gradient(180deg,transparent 60%,var(--hl) 60%);color:inherit}
.card a{color:var(--brand);font-weight:600;text-decoration:none;font-size:14.5px;margin-top:auto}

.newq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:center;margin-top:56px;background:var(--ink);color:#fff;border-radius:20px;padding:40px clamp(24px,4vw,48px)}
.newq h3{font-size:clamp(30px,4vw,48px);font-weight:800;line-height:1.05}
.newq h3 .hl{color:var(--ink)}
.newq p{font-size:clamp(18px,2vw,22px);line-height:1.45;color:#e5e7eb}
@media (max-width:760px){.newq{grid-template-columns:1fr}}
.play{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
@media (max-width:760px){.play{grid-template-columns:1fr}}
.playcard{border:1.5px dashed #cbd0d6;border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.playcard h3{font-size:20px;font-weight:800}
.playcard p{color:var(--body)}
.playcard .btn{align-self:flex-start;margin-top:6px}
.buzz{font-family:var(--f-bon);font-size:13px;background:var(--paper);border-radius:8px;padding:10px 12px;line-height:1.7}
.buzz s{color:var(--hot);text-decoration-thickness:2px}
.buzz b{background:var(--hl);font-weight:600}
/* thumbs + modal */
.thumb{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;border:1px solid var(--line);overflow:hidden;cursor:zoom-in;background:var(--alt);padding:0;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s}
.thumb:hover img{transform:scale(1.04)}
.thumb .zoom{position:absolute;right:8px;bottom:8px;background:rgba(10,10,10,.78);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:20px}
.thumb.private{display:grid;place-items:center;cursor:default;font-family:var(--f-bon);font-size:12.5px;color:var(--muted);background:repeating-linear-gradient(45deg,var(--alt) 0 10px,#f3f4f6 10px 20px)}
.links{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto}
.modal{position:fixed;inset:0;background:rgba(10,10,10,.6);display:grid;place-items:center;z-index:50;padding:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal .box{background:#fff;border-radius:16px;max-width:900px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal .bar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.modal .dotsr{display:flex;gap:6px}.modal .dotsr i{width:11px;height:11px;border-radius:50%;background:#e5e7eb;display:block}
.modal .addr{font-family:var(--f-bon);font-size:13px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal img{display:block;width:100%;max-height:70vh;object-fit:cover;object-position:top}
.modal .x{background:none;border:0;font-size:22px;cursor:pointer;line-height:1}
/* bon actions */
.bonact{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.bonact .row3{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bonact button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;font-size:13.5px;font-weight:600;cursor:pointer}
.bonact button.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.bonact small{font-size:12px;color:var(--muted);text-align:center;max-width:300px}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;max-width:min(520px,calc(100% - 32px));z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.bon-wrap{flex-direction:column;align-items:center}
/* page plan */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:6px}
@media (max-width:560px){.plan{grid-template-columns:1fr}}
.plan h4{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wire{border:1.5px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:5px;background:var(--alt)}
.wire div{border-radius:7px;padding:6px 9px;font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px;background:#fff;border:1.5px solid var(--line)}
.wire .ok{border-color:#a7f3d0;background:#ecfdf5}
.wire .half{border-color:#fde68a;background:#fffbeb}
.wire .no{border-color:#fecdd3;background:#fff1f2;border-style:dashed;color:#9f1239}
.wire div span:last-child{font-family:var(--f-bon)}
.qlist{display:grid;gap:8px}
.qlist div{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;display:flex;justify-content:space-between;gap:10px}
.qlist b{font-family:var(--f-bon);font-size:12px;white-space:nowrap}
.blogo{display:flex;justify-content:center;margin:2px 0 12px;line-height:0}
.blogo img{display:block;height:24px;width:auto}
.bfoot{text-align:center;margin-top:12px}
.bfoot .wit{font-size:14px;font-weight:700;line-height:1.35;margin:4px 0 10px}
.barcode{height:38px;margin:10px auto 4px;width:86%;background:repeating-linear-gradient(90deg,#1c1c1c 0 2px,transparent 2px 4px,#1c1c1c 4px 5px,transparent 5px 8px,#1c1c1c 8px 11px,transparent 11px 12px,#1c1c1c 12px 13px,transparent 13px 16px)}
.bfoot .url{font-size:11.5px;letter-spacing:.08em}
.a-k{background:#fef2f2;color:#b91c1c}
.card.feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:start}
.card.feat .txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.card.feat .prob{font-size:22px}
.card .pill{align-self:flex-start;font-size:12px;font-weight:700;background:var(--hl);padding:4px 10px;border-radius:20px}
@media (max-width:860px){.card.feat{grid-template-columns:1fr}}
.thumb .zoom.np{background:rgba(10,10,10,.6)}
/* logo strip (kept from the live site) */
.logos{background:var(--bg);border-block:1px solid var(--line);padding-block:40px}
.logos .lbl{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.logo-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;gap:56px;animation:logoScroll 42s linear infinite}
.logo-half{display:flex;align-items:center;gap:56px}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-mark{width:78px;height:30px;flex-shrink:0;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.6;transition:filter .25s,opacity .25s}
.logo-mark[alt="Microsoft"]{width:62px}
.logo-mark.wide{width:100px}
.logo-mark:hover{filter:none;opacity:1}
.logos .line{text-align:center;color:var(--body);font-size:16px;margin-top:26px}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-half{flex-wrap:wrap;justify-content:center}}
/* results (kept from the live site) */
.res .head{text-align:center;margin-inline:auto}
.rcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:8px}
@media (max-width:760px){.rcards{grid-template-columns:1fr}}
.rcard{display:flex;flex-direction:column;gap:18px;border:1px solid var(--line);border-radius:22px;padding:30px 32px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.rcard:hover{border-color:#bfd2fb;transform:translateY(-2px)}
.rcard.blue{border-color:#c7d7fb}
.rcard .lg{display:flex;align-items:center;gap:14px}
.rcard .lg img{height:34px;width:auto;max-width:150px;object-fit:contain}
.rcard .tagp{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:5px 12px;border-radius:20px}
.rcard p{font-size:19px;line-height:1.55}
.rcard p .who{color:var(--muted)}
.rcard .go{margin-top:auto;color:var(--brand);font-weight:600;font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;text-align:center}
.stats b{display:block;font-size:clamp(44px,6vw,72px);font-weight:900;letter-spacing:-.04em;line-height:1}
.stats span{color:var(--muted);font-size:16px}
.prog{background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.ptop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.ptop .left{font-family:var(--f-bon);font-weight:600;color:var(--brand);white-space:nowrap}
.pbar{height:10px;background:#e8ebf0;border-radius:10px;margin-top:10px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#60a5fa);border-radius:10px;transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.plabels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--muted)}
.plabels span.on{color:var(--ink)}.plabels span.done{color:var(--ok)}
.q1{font-size:20px;font-weight:800;margin:4px 0 4px;letter-spacing:-.015em}
.step.s0{grid-template-columns:28px minmax(0,1fr) auto}
.step.s1,.step.s2{grid-template-columns:28px minmax(0,1fr) auto}
.step textarea.t{border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;width:100%;resize:none;padding:4px 2px;line-height:1.35;field-sizing:content;min-height:1.6em;overflow:hidden}
.step textarea.t:focus{outline:2px solid var(--brand-soft);border-radius:6px}
.step .tt{font-size:15px;font-weight:500;line-height:1.35}
.step .del{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px}
.step .del:hover{color:var(--hot)}
.doneline{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ok);margin-top:14px}
@media (max-width:520px){.step.s1,.step.s2{grid-template-columns:22px minmax(0,1fr)}.step.s1 .mins,.step.s2 .same{grid-column:2;justify-self:start}}
.ctab{width:100%;max-width:360px;margin-top:20px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:18px;box-shadow:4px 4px 0 var(--ink);animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.ctab .ct{font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.ctab .cs{font-size:14.5px;color:var(--body);margin-top:6px}
.cf{display:grid;gap:8px;margin-top:14px}
.cf input:not([type]){border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
.cf .ck{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--body);font-weight:500}
.cf .ck input{margin-top:3px;accent-color:var(--brand)}
.cf .btn{justify-content:center;margin-top:4px}
.ctab small{display:block;margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3 div{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.steps3 b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--hl);font-weight:800;margin-bottom:10px}
.steps3 h3{font-size:19px;font-weight:800;margin-bottom:6px}
.steps3 p{color:var(--body);font-size:15px}
.bonact .again{border-style:dashed}
.cat{display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:26px;font-size:15px;font-weight:700;background:var(--brand-soft);color:var(--brand);border-radius:30px;padding:7px 16px}
.cat span{color:var(--body);font-weight:600}
.hero h1{margin-top:14px!important}
.fit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}
@media (max-width:760px){.fit{grid-template-columns:1fr}}
.fit div{border-radius:16px;padding:24px 26px;border:1px solid var(--line);background:#fff}
.fit h3{font-size:18px;font-weight:800;margin-bottom:12px}
.fit ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.fit li{position:relative;padding-left:28px;font-size:16px;color:var(--body)}
.fit .yes li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--ok)}
.fit .no{background:transparent}
.fit .no li::before{content:"✕";position:absolute;left:0;font-weight:800;color:var(--muted)}
.alts{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.35;letter-spacing:-.015em;max-width:30ch;margin:0 0 30px}
.alts s{color:var(--muted);text-decoration-thickness:2px}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.themes{grid-template-columns:1fr}}
.themes div{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px}
.themes h3{font-size:20px;font-weight:800;line-height:1.25}
.themes p{color:var(--body)}
.themes .pf{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink);border-top:1px dashed var(--line);padding-top:12px}
.themes .pf a{color:var(--brand);text-decoration:none}
/* Deeper + who + form */
.deeper{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1.5px dashed #cbd0d6;border-radius:16px;padding:24px 26px;margin-top:40px}
.deeper p{font-size:17px;max-width:56ch}
.who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.who img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 1px var(--line)}
.who p{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.3;letter-spacing:-.015em;max-width:30ch}
@media (max-width:560px){.who{grid-template-columns:1fr}}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}
form .full{grid-column:1/-1}
form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
form input,form textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;font-size:15.5px;font-weight:400;background:#fff}
form input:focus,form textarea:focus{border-color:var(--brand);outline:none}
form textarea{min-height:110px;resize:vertical}
@media (max-width:560px){form{grid-template-columns:1fr}}
.fine{font-size:12.5px;color:var(--muted)}
.sent{display:none;font-weight:600;color:var(--ok)}
footer{padding-block:34px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Added for the live build (23.10.2026) ---------- */
/* Fonts come from our own server. No request goes to Google. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/home/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/home/fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/home/fonts/plexmono-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/home/fonts/plexmono-700.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/home/fonts/caveat-latin.woff2) format('woff2')}

/* Language switch in the nav, visible on phones too */
nav .links .langsw{font-size:14px;color:var(--muted);white-space:nowrap;font-weight:600}
nav .links .langsw b{color:var(--ink)}
nav .links .langsw a{display:inline!important;color:var(--body);text-decoration:none}
nav .links .langsw a:hover{color:var(--brand)}

/* Hero: text left, vertical video right. On phones the video comes after the buttons. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.hero-text{min-width:0}
.hero-video{position:relative;margin:0;width:100%;max-width:280px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#1c1917;box-shadow:0 24px 48px -20px rgba(0,0,0,.35);border:4px solid #fff;outline:1px solid var(--line)}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center}
  .hero-video{max-width:300px;justify-self:end}
  /* Smaller headline next to the video, so the buttons stay on the first screen */
  .hero-grid h1{font-size:clamp(40px,4.4vw,58px);max-width:21ch}
  .hero{padding-block:40px 64px}
}
.hv-btn{position:absolute;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:rgba(10,10,10,.72);border-radius:50%;width:44px;height:44px;right:12px;bottom:12px;padding:0}
.hv-btn svg{width:22px;height:22px}
.hv-btn:focus-visible{outline:3px solid var(--hl)}
.hv-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hv-play svg{width:30px;height:30px;margin-left:4px}

/* Forms */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:progress}
.sent.err{color:var(--hot)}
.cf .thanks{font-weight:600;color:var(--ok);font-size:15px;line-height:1.45}
.ctab small a,.fine a{color:inherit;text-decoration:underline}

/* Footer links */
footer .fl{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}

/* Scan state */
.example.real{background:#dcfce7;color:#166534}

/* Print: only the chosen receipt goes on paper */
.print-host{display:none}
@media print{
  @page{margin:12mm}
  body.printing>*:not(.print-host){display:none!important}
  body.printing .print-host{display:block!important}
  body.printing .print-host .bon{transform:none!important;filter:none!important;margin:10mm auto;max-width:340px;box-shadow:none}
  body.printing .print-host *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Round 2 (23.10.2026): one main button, the mini receipt, one default door ---------- */
/* Nav: the main button replaces "Schreib mir" */
nav .links a.cta{white-space:nowrap}
@media (max-width:720px){
  nav .wrap{padding-block:14px}
  nav .links{gap:12px}
  nav .links a.cta{font-size:13px;padding:8px 11px}
}
@media (max-width:420px){
  .brand img{height:21px}
  nav .links .langsw{font-size:13px}
  nav .links a.cta .nb{display:none}
}

/* Hero: the main button, the grey line, the plain talk link, the mini receipt */
.cta-row{display:flex;align-items:center;gap:22px 34px;flex-wrap:wrap;margin-top:30px}
.cta-main{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;max-width:100%}
.btn.big{font-size:17px;padding:16px 24px;box-shadow:0 10px 24px -10px rgba(37,99,235,.6);max-width:100%;text-align:center;justify-content:center}
.btn.sm{font-size:14.5px;padding:10px 16px;margin-top:14px}
.cta-note{font-size:14px;color:var(--muted);font-weight:500}
.talk{font-size:15px;color:var(--body);margin-top:4px}
.talk a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.minibon{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
.mb{width:158px;background:var(--paper);font-family:var(--f-bon);font-size:9.5px;line-height:1.45;color:#1c1c1c;padding:12px 11px 13px;position:relative;filter:drop-shadow(0 10px 16px rgba(0,0,0,.14));transform:rotate(-3.5deg)}
.mb::before,.mb::after{content:"";position:absolute;left:0;right:0;height:6px;background:radial-gradient(circle at 3px 0,transparent 3px,var(--paper) 3.5px) 0 0/6px 6px repeat-x}
.mb::before{top:-6px;transform:rotate(180deg)}
.mb::after{bottom:-6px}
.mb-logo{display:flex;justify-content:center;line-height:0}
.mb-logo img{display:block;height:12px;width:auto}
.mb-t{text-align:center;font-weight:700;letter-spacing:.06em;font-size:10.5px;margin-top:4px}
.mb hr{border:0;border-top:1px dashed #b9b4a8;margin:7px 0}
.mb-r{display:flex;justify-content:space-between;gap:6px}
.mb-r span:first-child{min-width:0}
.mb-r span:first-child::first-letter{color:#b45309}
.mb-r span:last-child{white-space:nowrap}
.mb-hit{background:var(--hl);margin:0 -3px;padding:3px 3px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:700;line-height:1.25}
.mb-hit b{font-size:14px;white-space:nowrap}
.mb-bar{height:16px;margin:9px auto 0;width:80%;background:repeating-linear-gradient(90deg,#1c1c1c 0 1px,transparent 1px 3px,#1c1c1c 3px 4px,transparent 4px 6px,#1c1c1c 6px 8px,transparent 8px 9px)}
.minibon figcaption{font-size:12.5px;color:var(--muted);font-weight:500;text-align:center;max-width:180px;line-height:1.35}
@media (max-width:899px){.cta-row{gap:18px 22px;margin-top:26px}}
@media (max-width:520px){
  .btn.big{font-size:16px;padding:15px 18px;width:100%}
  .cta-main{width:100%}
  .minibon{flex-direction:row;gap:16px}
  .mb{width:140px}
  .minibon figcaption{text-align:left;max-width:150px}
}

/* The Agentur-Sprech switch, now small and below the buttons */
.switchrow.mini{margin-top:26px;gap:10px}
.switchrow.mini .switch{padding:4px 6px 4px 12px;gap:8px;border-width:1.5px;box-shadow:3px 3px 0 var(--ink)}
.switchrow.mini .switch span{font-size:13px}
.switchrow.mini .tog{width:46px;height:26px}
.switchrow.mini .tog::after{top:3px;left:3px;width:20px;height:20px}
.switchrow.mini .tog[aria-checked="true"]::after{transform:translateX(20px)}
.switchrow.mini .tog small{font-size:8.5px;padding-right:5px}
.switchrow.mini .tog[aria-checked="true"] small{padding-left:6px}
.switchrow.mini .scribble{font-size:20px}
.hero.agency .switchrow.mini .switch{box-shadow:3px 3px 0 #4f46e5}
.hero .cat{margin-top:0}
.hero.agency .cta-note,.hero.agency .talk{opacity:.85}

/* Doors: the Kassenbon is the default and big, the other two are small */
.doors.one{display:block;margin-bottom:18px}
.doors.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0}
.door{position:relative;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;cursor:pointer;width:100%}
.door[aria-pressed="true"]{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.door .dname{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.door .dtitle{display:block;font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.door .dlines{display:grid;gap:6px;margin-top:4px}
.door .dl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;font-size:15px;color:var(--body);line-height:1.45}
.door .dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.door .teaser{align-self:flex-start;margin-top:8px}
.door.main{padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:30px;row-gap:8px;align-items:start}
.door.main>*{grid-column:1}
.door.main .teaser{grid-column:2;grid-row:2/span 3;align-self:center;font-size:15px;padding:10px 14px}
.door.main .dtitle{font-size:clamp(24px,3vw,32px)}
.start-tag{justify-self:start;align-self:flex-start;background:var(--hl);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:20px;padding:4px 11px}
.door .arr{position:absolute;right:18px;top:18px;font-size:20px;font-weight:700;color:var(--brand)}
.doors.two .door{padding-right:46px}
.doors.two .door .dtitle{font-size:18px}
.doors.two .door .dl{font-size:14px;grid-template-columns:122px minmax(0,1fr)}.doors.two .door .dt{font-size:11px;white-space:nowrap}
.other-lbl{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:44px 0 12px}
.how123{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;font-weight:600;color:var(--ink)}
.how123 li{display:flex;align-items:center;gap:8px}
.how123 b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--hl);font-size:13px;font-weight:800}
.anchor{display:block;height:0;scroll-margin-top:12px}
@media (max-width:760px){
  .door.main{display:flex;padding:22px 20px}
  .door.main .teaser{align-self:flex-start}
  .door .dl{grid-template-columns:1fr;gap:1px}
  .doors.two{grid-template-columns:1fr;gap:10px}
  /* Short rows on phones: name, title, arrow */
  .doors.two .door{padding:14px 44px 14px 16px;gap:4px}
  .doors.two .door .dlines,.doors.two .door .teaser{display:none}
  .doors.two .door .dtitle{font-size:16.5px}
  .door .arr{top:50%;transform:translateY(-50%)}
  .how123{flex-direction:column;gap:6px}
  .other-lbl{margin-top:36px}
}

/* "So laeuft's" and above the form */
.steps3 .btn.sm{display:inline-flex}
.pre-form{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;border:1.5px dashed #cbd0d6;border-radius:16px;padding:20px 24px;margin-bottom:44px;max-width:720px}
.pre-form p{font-size:17px;font-weight:600;color:var(--ink)}
@media (max-width:520px){.pre-form .btn{width:100%;justify-content:center}}

/* A form that cannot send says so, with the address as a link */
.sendfail{font-size:14.5px;font-weight:600;color:var(--hot);line-height:1.45;margin-top:4px}
.sendfail a{color:inherit;text-decoration:underline}
/* Phones: keep the nav on one line and the main button above the consent bar */
@media (max-width:420px){
  nav .links .langsw{font-size:0}
  nav .links .langsw b{display:none}
  nav .links .langsw a{font-size:13.5px}
}
@media (max-width:520px){
  .hero h1{font-size:34px;line-height:1.06}
  .hero .sub{font-size:16.5px;margin-top:18px}
  .cat{font-size:13.5px;padding:6px 13px}
}

/* ---------- Round 3 (23.10.2026) ---------- */
/* Laptop hero: smaller headline, the mini receipt sits right next to the button */
@media (min-width:900px){
  .hero-grid h1{font-size:clamp(38px,3.7vw,48px);max-width:22ch}
  .hero .sub{margin-top:18px}
  .cta-row{flex-wrap:nowrap;align-items:flex-start;gap:26px;margin-top:26px}
  .minibon{gap:8px;margin-top:-4px}
  .mb{width:124px;font-size:8px;padding:9px 9px 10px}
  .mb-logo img{height:10px}
  .mb-t{font-size:9px}
  .mb-hit b{font-size:12px}
  .mb-bar{height:12px;margin-top:7px}
  .minibon figcaption{font-size:11.5px;max-width:140px}
}
/* Small phones: the top bar keeps the logo, the language and the button on one line */
@media (max-width:380px){
  nav .links{gap:9px}
  nav .links a.cta{font-size:12px;padding:8px 9px}
  .brand img{height:18px}
  nav .links .langsw a{font-size:12.5px}
}
/* the wordmark is wider than the old square, so the top bar keeps a small gap and shrinks it on tiny phones */
@media (max-width:720px){nav .wrap{gap:10px}}
@media (max-width:340px){.brand img{height:14px}nav .wrap{gap:6px}nav .links{flex-wrap:nowrap}}
@media (min-width:900px){.hero{padding-top:28px}.cta-row{margin-top:20px}}
@media (max-width:380px){
  .hero{padding-top:14px}
  .hero h1{font-size:30px}
  .hero .sub{font-size:16px;margin-top:14px}
  .cta-row{margin-top:20px}
  .btn.big{font-size:15px;padding:13px 12px}
}

/* ---------- Round 4 (23.10.2026): reorder the steps ---------- */
.step.s0{grid-template-columns:20px 22px minmax(0,1fr) auto auto;gap:8px}
.grip{display:grid;grid-template-columns:repeat(2,4px);gap:3px 4px;align-content:center;justify-content:center;width:20px;height:32px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:6px}
.grip i{width:4px;height:4px;border-radius:50%;background:#9aa1ab;display:block}
.grip:hover i{background:var(--ink)}
.step.dragging{border-color:var(--brand);box-shadow:0 10px 24px -12px rgba(37,99,235,.55);background:#fff;position:relative;z-index:2}
.step.dragging .grip{cursor:grabbing}
.steps.sorting{user-select:none;-webkit-user-select:none}
.mv{display:flex;flex-direction:column;gap:2px}
.mv button{width:26px;height:17px;border:1px solid var(--line);background:#fff;border-radius:5px;font-size:8px;line-height:1;color:var(--body);cursor:pointer;padding:0}
.mv button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.mv button:disabled{opacity:.3;cursor:default}
.sorthint{font-size:13px;color:var(--muted);margin-top:10px}
.sorthint+.addrow{margin-top:4px}
@media (max-width:520px){
  .step.s0{grid-template-columns:20px 18px minmax(0,1fr) auto auto;gap:6px;padding:8px 6px 8px 4px}
  .grip{height:40px;width:22px}
  .mv button{width:30px;height:20px}
}

/* ---------- Round 5 (23.10.2026) ---------- */
/* Open tool: steps left, receipt right and sticky; the next-step card goes under the steps */
.tool{grid-template-areas:"panel bon" "cta bon";grid-template-rows:auto 1fr;row-gap:20px}
.tool>.panel{grid-area:panel}
.tool>.bon-wrap{grid-area:bon;align-self:start}
.tool>.ctab{grid-area:cta;align-self:start;max-width:none;margin-top:0}
@media (min-width:901px){
  .tool>.bon-wrap{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:16px 10px 20px;scrollbar-width:thin}
}
@media (max-width:900px){
  .tool{grid-template-areas:"panel" "bon" "cta";grid-template-rows:auto}
  .tool>.bon-wrap{position:static}
  .tool>.ctab{max-width:420px;justify-self:center;width:100%}
}
/* The tick boxes: one per line, box left, label wraps */
form.cf,form.kform{grid-template-columns:minmax(0,1fr);max-width:none}
form.cf label.ck,form.kform label.ck{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--body)}
form.cf label.ck input,form.kform label.ck input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;border:0;accent-color:var(--brand)}
/* Send it to Khaled */
.bonact button.tok{background:var(--brand);color:#fff;border-color:var(--brand)}
.kform{display:grid;gap:10px;width:100%;max-width:360px;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.kform label{font-size:13.5px;gap:5px}
.kform input:not([type]),.kform textarea{padding:10px 12px;font-size:15px}
.kform textarea{min-height:64px}
.kform .btn{justify-content:center}
.kform small{font-size:12px;color:var(--muted);text-align:center}
.kform small a{color:inherit;text-decoration:underline}
.kthanks{max-width:340px;margin-top:16px;text-align:center}
.est{font-size:13.5px;color:var(--muted);margin:-6px 0 16px;line-height:1.45}
.est .linkbtn{font-size:13.5px;padding:0;text-align:left;display:inline;text-decoration:underline;text-underline-offset:2px}
/* Pick up where you left off */
.resume{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;background:var(--brand-soft);border:1px solid #c7d7fb;border-radius:14px;padding:14px 18px;margin-bottom:18px}
.resume p{font-weight:700;font-size:16px}
.resume div{display:flex;gap:8px;flex-wrap:wrap}
.resume .btn.sm{margin-top:0}

/* ===== Round 6: visual bottom half (how it works, proof, projects, contact) ===== */
.h-xl{font-size:clamp(34px,5.4vw,64px);font-weight:800;line-height:1.04;letter-spacing:-.035em;max-width:16ch}
.lede{font-size:clamp(18px,2vw,21px);color:var(--body);margin-top:16px;max-width:44ch}

/* How it works: three torn tickets */
section.band.how{background:#fffbeb;border-block:1px solid #fdf0c4}
.tickets{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;position:relative}
.tk{position:relative;background:var(--paper);padding:26px 24px 30px;display:flex;flex-direction:column;gap:18px;filter:drop-shadow(0 14px 22px rgba(120,90,10,.16))}
.tk::before,.tk::after{content:"";position:absolute;left:0;right:0;height:9px;background:radial-gradient(circle at 4.5px 0,transparent 4.5px,var(--paper) 5px) 0 0/9px 9px repeat-x}
.tk::before{top:-9px;transform:rotate(180deg)}
.tk::after{bottom:-9px}
.tk.t1{transform:rotate(-2deg)}.tk.t2{transform:rotate(1.5deg) translateY(14px)}.tk.t3{transform:rotate(-1deg)}
.tk .tn{font-size:64px;font-weight:900;line-height:.9;letter-spacing:-.05em;color:var(--brand)}
.tk p{font-size:clamp(20px,2vw,24px);font-weight:800;line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
.tvis{height:136px;display:grid;place-items:center;border-top:1.5px dashed #d6cfbd;border-bottom:1.5px dashed #d6cfbd;padding:12px 0}
.tvis .mb{transform:rotate(-2deg);width:190px;font-size:10.5px;filter:none;background:#fff;border-radius:2px;box-shadow:0 2px 0 #eee6d3}
.tvis .mb::before,.tvis .mb::after{display:none}
.tvis .mb-hit b{font-size:15px}
.tvis .mb-logo img{height:11px}
.tvis .mb hr{margin:5px 0}
.v2{position:relative}
.v2 svg{width:104px;height:104px;transform:rotate(-90deg)}
.v2 circle{fill:none;stroke-width:9}
.v2 .trk{stroke:#efe7d2}
.v2 .arc{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:33 100}
.v2 b{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:900;letter-spacing:-.03em}
.v3 .stamp{display:inline-block;border:4px solid var(--brand);color:var(--brand);border-radius:12px;padding:8px 16px;font-size:26px;font-weight:900;letter-spacing:-.02em;transform:rotate(-8deg);background:rgba(37,99,235,.06)}
.how-cta{margin-top:56px}
/* print animation */
.tickets.pre .tk{opacity:0;transform:translateY(-26px) rotate(0)}
.tickets.go .tk{transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.3,.4,1)}
.tickets.go .tk.t2{transition-delay:.18s}.tickets.go .tk.t3{transition-delay:.36s}
.tickets.pre .v2 .arc{stroke-dasharray:0 100}
.tickets.go .v2 .arc{transition:stroke-dasharray 1.2s ease .5s}
.tickets.pre .stamp{opacity:0;transform:rotate(-8deg) scale(1.8)}
.tickets.go .stamp{transition:opacity .25s ease .9s,transform .35s cubic-bezier(.3,1.6,.5,1) .9s}
@media (max-width:860px){
  .tickets{grid-template-columns:1fr;gap:30px;margin-top:36px}
  .tk{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n p" "v v";gap:12px 16px;padding:20px 20px 22px;align-items:center}
  .tk .tn{grid-area:n;font-size:52px}.tk p{grid-area:p;font-size:20px}.tk .tvis{grid-area:v;height:112px}
  .tk.t2{transform:rotate(1deg)}
  .v2 svg{width:84px;height:84px}.v2 b{font-size:16px}.v3 .stamp{font-size:22px}
  .how-cta{margin-top:40px}
}

/* Proof */
section.band.res2{padding-bottom:64px}
.pgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;margin-top:44px;align-items:stretch}
.ffcard{background:var(--brand);color:#fff;border-radius:24px;padding:30px 32px;text-decoration:none;display:flex;flex-direction:column;gap:18px;transition:transform .2s;position:relative;overflow:hidden}
.ffcard:hover{transform:translateY(-2px)}
.fflogo{align-self:flex-start;background:#fff;border-radius:12px;padding:8px 12px;display:flex}
.fflogo img{height:26px;width:auto}
.ffnum{font-size:clamp(84px,11vw,132px);font-weight:900;letter-spacing:-.06em;line-height:.85}
.ffbars{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;height:170px;border-bottom:2px solid rgba(255,255,255,.5)}
.ffbars .bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:0;position:relative}
.ffbars .bar i{display:block;border-radius:4px 4px 0 0;position:relative;transform-origin:bottom}
.ffbars .b0 i{height:calc((100% - 22px) * .68);background:rgba(255,255,255,.35)}
.ffbars .b1 i{height:calc(100% - 22px);background:var(--hl)}
.ffbars .b1 em{position:absolute;top:8px;left:0;right:0;text-align:center;font-style:normal;font-weight:900;color:var(--ink);font-size:18px}
.ffbars .bar span{position:absolute;bottom:-26px;left:0;right:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);text-align:center;white-space:nowrap}
.ffbars{margin-bottom:26px}
.ffcard p{font-size:18px;line-height:1.45;color:#e8efff}
.ffcard .go{font-weight:700;font-size:17px;margin-top:auto;color:#fff}
.ffcard.pre .bar i{transform:scaleY(0)}
.ffcard.go .bar i{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.ffcard.go .b1 i{transition-delay:.25s}
.pgrid .rcard{border-radius:24px;justify-content:center}
.pgrid .rcard p{font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.35;letter-spacing:-.015em}
.pgrid .rcard p .who{display:block;font-size:16px;font-weight:500;margin-top:12px}
.logos-in{margin-top:48px}
.lbl2{text-align:center;font-size:15px;font-weight:700;color:var(--body);margin-bottom:20px}
.statline{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 40px;margin-top:44px;font-size:clamp(17px,1.8vw,20px);color:var(--body);font-weight:600}
.statline span{white-space:nowrap}
.statline b{font-size:clamp(44px,5.5vw,68px);font-weight:900;letter-spacing:-.045em;color:var(--ink);margin-right:4px;vertical-align:-.08em}
@media (max-width:860px){
  .pgrid{grid-template-columns:1fr;margin-top:32px}
  .ffcard{padding:24px 22px}
  .ffbars{height:130px}
  .statline{gap:4px 22px;margin-top:32px}
}

/* Projects gallery */
section.band.proj{background:var(--brand-soft);border-block:1px solid #dde7fd}
.proj .filters{margin:30px 0 26px}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;cursor:pointer;width:100%}
.tile:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:16px}
.tim{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 0 #dde7fd,0 12px 26px -16px rgba(29,78,216,.45)}
.tim img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .45s}
.tile:hover .tim img{transform:scale(1.05)}
.tim .area{position:absolute;left:10px;top:10px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tim .zoom{position:absolute;right:10px;bottom:10px;background:rgba(10,10,10,.8);color:#fff;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:20px}
.tt{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:6px;color:var(--ink)}
.t1{font-size:15px;line-height:1.45;color:var(--body)}
.tpill{align-self:flex-start;font-size:12px;font-weight:700;background:var(--hl);padding:3px 9px;border-radius:20px;color:var(--ink)}
@media (max-width:1060px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .proj .filters{flex-wrap:nowrap;overflow-x:auto;margin:24px -28px 20px;padding:2px 28px;scrollbar-width:none}
  .proj .filters::-webkit-scrollbar{display:none}
  .proj .filters button{flex:none}
  .gal{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -28px;padding:4px 28px 14px;scroll-padding-left:28px;scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gcard{scroll-snap-align:start}
}
/* preview popup with the longer text */
.modal .box{max-height:92vh;display:flex;flex-direction:column}
.modal .mscroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal #mimg{max-height:46vh}
.mbody{padding:20px 24px 26px;display:flex;flex-direction:column;gap:12px}
.mbody:empty{display:none}
.mbody .mtop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mbody .ind{font-size:13px;color:var(--muted);font-weight:600}
.mbody .mname{font-size:15px;font-weight:800}
.mbody .prob{font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.25;letter-spacing:-.02em}
.mbody .big{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}
.mbody .big mark{background:linear-gradient(180deg,transparent 60%,var(--hl) 60%);color:inherit}
.mbody dl{margin:0;display:grid;gap:6px}
.mbody dt{font-size:13px;font-weight:700;color:var(--brand)}
.mbody dd{margin:0 0 8px;color:var(--body);font-size:15.5px}
.mbody .pill{align-self:flex-start;font-size:12px;font-weight:700;background:var(--hl);padding:4px 10px;border-radius:20px}
.mbody .links a{color:var(--brand);font-weight:700;text-decoration:none}
@media (max-width:560px){.modal #mimg{max-height:30vh}.mbody{padding:16px 18px 22px}}

/* Contact with a face */
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.me{margin:0;position:relative}
.me img{width:100%;height:auto;max-width:420px;aspect-ratio:1;object-fit:cover;border-radius:28px;display:block;position:relative;z-index:1}
.me::before{content:"";position:absolute;left:-14px;top:-14px;width:min(420px,100%);aspect-ratio:1;background:var(--hl);border-radius:28px;transform:rotate(-3deg)}
.me figcaption{margin-top:24px;max-width:420px;display:flex;flex-direction:column;gap:10px}
.me figcaption p{font-size:18px;line-height:1.45;color:var(--body)}
.me figcaption b{color:var(--ink)}
.me .me2{font-size:15.5px;color:var(--muted)}
.ct-main .after{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.015em;margin:14px 0 28px;color:var(--ink)}
.ct-main form{max-width:none}
@media (max-width:860px){
  .ct-grid{grid-template-columns:1fr;gap:40px}
  .me{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;align-items:start}
  .me::before{width:132px;left:-8px;top:-8px;border-radius:22px}
  .me img{border-radius:22px}
  .me figcaption{margin-top:0}
  .me figcaption p{font-size:16px}
  .me .me2{font-size:14px}
}
@media (max-width:420px){.me{grid-template-columns:104px minmax(0,1fr);gap:16px}.me::before{width:104px}}

/* Nagi card: thumbnail fills the card, video plays in a popup (round 7, 23.10.2026) */
.pgrid .rcard.nagi{justify-content:flex-start}
.vthumb{position:relative;display:block;width:100%;flex:1 1 auto;min-height:220px;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#0f172a}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;transition:transform .35s}
.vthumb img.bg{object-fit:cover;filter:blur(18px) brightness(.7);transform:scale(1.15)}
.vthumb img.fg{object-fit:contain}
.vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,0) 45%,rgba(15,23,42,.35))}
.vthumb:hover img.fg{transform:scale(1.03)}
.vthumb .play{position:absolute;left:50%;top:auto;bottom:18px;z-index:1;width:72px;height:72px;margin:0 0 0 -36px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 12px 32px rgba(0,0,0,.35);transition:transform .2s}
.vthumb:hover .play{transform:scale(1.08)}
.vthumb .play svg{width:32px;height:32px;fill:#fff;margin-left:4px}
.vlink{background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer}
.rcard .vlink{font-weight:600;font-size:17px;color:var(--brand)}
.vlink:focus-visible,.vthumb:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (max-width:860px){.vthumb{flex:none;min-height:0;aspect-ratio:4/3}}
.vmodal{position:fixed;inset:0;z-index:70;background:rgba(5,8,15,.88);display:grid;place-items:center;padding:max(64px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px))}
.vbox{width:min(460px,100%,calc((100vh - 110px) * .5625));width:min(460px,100%,calc((100dvh - 110px) * .5625));aspect-ratio:576/1024}
.vbox video{display:block;width:100%;height:100%;border-radius:16px;background:#000;object-fit:contain}
.vx{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center}
.vx:hover{background:rgba(255,255,255,.28)}
.vx:focus-visible{outline:3px solid #fff;outline-offset:2px}