/* xansa — ultimate build. Cream paper, ink type, one loud vermilion. */

:root{
  --cream:#FBF7F0; --paper:#FFFDF8; --ink:#221F1A; --verm:#E8552F; --verm-text:#C93E18; --mustard:#F2B33D; --gray:#6E675C;
  --rule:rgba(34,31,26,.14); --rule-soft:rgba(34,31,26,.08);
  --display:"Unbounded",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px); --max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  --bg:#FBF7F0; --btn-bg:#C93E18; --btn-hover:#221F1A; --btn-hover-fg:#FBF7F0;
}
/* worlds: a section can turn the page into another colour of the palette; everything on it reads the same tokens */
[data-world="ink"]{--mk-box:#FBF7F0;--mk-x:#221F1A;--bg:#221F1A;--ink:#FBF7F0;--gray:rgba(251,247,240,.66);--rule:rgba(251,247,240,.2);--rule-soft:rgba(251,247,240,.1);--verm-text:#F0683F;--btn-hover:#FBF7F0;--btn-hover-fg:#221F1A}
[data-world="mustard"]{--bg:#F2B33D;--gray:rgba(34,31,26,.76);--rule:rgba(34,31,26,.3);--rule-soft:rgba(34,31,26,.16);--verm-text:#221F1A;--btn-bg:#221F1A;--btn-hover:#C93E18}
[data-world="verm"]{--bg:#E8552F;--gray:rgba(34,31,26,.82);--rule:rgba(34,31,26,.32);--rule-soft:rgba(34,31,26,.18);--verm:#FBF7F0;--verm-text:#221F1A;--btn-bg:#221F1A;--btn-hover:#FBF7F0;--btn-hover-fg:#221F1A}
section[data-world],footer[data-world]{background:var(--bg);color:var(--ink)}
/* a wave instead of a hard edge: the next world laps into the previous one. Static SVG, costs nothing while scrolling */
.wave{position:absolute;left:0;bottom:calc(100% - 1px);z-index:1;display:block;width:100%;height:clamp(34px,6.2vw,92px);fill:var(--bg);pointer-events:none}
.wave--flip{transform:scaleX(-1)}
.foot{position:relative}
[data-world="verm"] .form{--btn-bg:#221F1A;--btn-hover:#C93E18}
.nav[data-world="verm"] .nav__links a,.nav[data-world="mustard"] .nav__links a{opacity:1}
.nav__links a.is-here{opacity:1;text-decoration:underline;text-decoration-color:var(--verm);text-decoration-thickness:.12em;text-underline-offset:.3em}
/* sheets of paper keep their own ink, whatever world they lie in */
.ledger,.ba__clip,.ba__knob,.form,.sheet{--mk-box:#221F1A;--mk-x:#FBF7F0;--ink:#221F1A;--gray:#6E675C;--rule:rgba(34,31,26,.14);--rule-soft:rgba(34,31,26,.08);--verm:#E8552F;--verm-text:#C93E18;--btn-bg:#C93E18;--btn-hover:#221F1A;--btn-hover-fg:#FBF7F0;color:var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:clamp(17px,1.15vw,19px);line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor label,body.has-cursor .task{cursor:none}
body.has-cursor input:not([type=range]),body.has-cursor textarea{cursor:text}
body.has-cursor input[type=range]{cursor:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p,li,.lede,.hero__sub,.stat__l{text-wrap:pretty}
html.js .hero__title,html.js .hero__sub,html.js .hero__offer,html.js .ledger,html.js .hero__cue,html.js .nav{visibility:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
b,strong{font-weight:600}
::selection{background:var(--verm);color:var(--cream)}
[data-world="verm"] ::selection{background:#221F1A;color:#FBF7F0}
.nav[data-world="verm"] .nav__count{color:#221F1A}
[data-world="mustard"] :focus-visible{outline-color:#221F1A}

.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* paper grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none}
body.has-cursor .cursor{display:block}
.cursor__dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--cur,#221F1A);transition:transform .25s var(--ease),background .2s}
.cursor__strike{position:absolute;left:-16px;top:-2px;width:32px;height:4px;border-radius:2px;background:var(--verm);transform:scaleX(0) rotate(-6deg);transform-origin:center;transition:transform .25s var(--ease)}
.cursor.is-hidden{opacity:0}
.cursor.is-link .cursor__dot{transform:scale(2.6);background:transparent;box-shadow:inset 0 0 0 1px var(--cur,#221F1A)}
.cursor.is-text{opacity:0}
.cursor.is-strike .cursor__dot{transform:scale(0)}
.cursor.is-strike .cursor__strike{transform:scaleX(1) rotate(-6deg)}

/* mark */
.mark{width:28px;height:28px;flex:none;overflow:visible}
.lm-box{fill:var(--mk-box,#221F1A)}.lm-x{fill:var(--mk-x,#FBF7F0)}.lm-dot{fill:var(--mk-dot,#E8552F)}
.word{display:block;height:18px;width:81px;flex:none;overflow:visible}
.lw{fill:currentColor}.lw-c{fill:var(--bg)}

/* type */
.h2{font-family:var(--display);font-weight:600;font-size:clamp(1.75rem,4.3vw,3.9rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 .6em;max-width:16ch;text-wrap:balance}
.lede{font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.45;max-width:46ch;margin:0 0 2.5rem;color:var(--ink)}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--verm);text-decoration-thickness:.09em;text-underline-offset:.16em;transition:color .2s}
.link:hover{color:var(--verm-text);text-decoration-thickness:.16em}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.85em 1.4em;background:var(--btn-bg);color:#FBF7F0;font:500 1rem/1 var(--body);text-decoration:none;border:0;border-radius:4px;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),color .3s}
.btn::before{content:"";position:absolute;inset:0 -12px;background:var(--btn-hover);transform:translateX(-115%) skewX(-12deg);transform-origin:left;transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(0)}
.btn:hover{transform:translateY(-1px)}
.btn:hover,.btn:focus-visible{color:var(--btn-hover-fg)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--nav{padding:.7em 1.1em;font-size:.95rem;white-space:nowrap}
.btn--big{font-size:clamp(1rem,1.3vw,1.2rem);padding:1em 1.6em}
:focus-visible{outline:2px solid var(--verm);outline-offset:3px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(14px,1.6vw,22px) var(--gutter);transition:background .4s,box-shadow .4s,color .4s}
.nav__unit,.lm-box,.lm-x,.lw,.lw-c{transition:color .4s,fill .4s}
.nav{color:var(--ink)}
.nav.is-scrolled{background:var(--bg);box-shadow:0 1px 0 var(--rule)}
.nav .mark{transform-origin:50% 50%}
.nav__brand .lm-dot{transform-box:fill-box;transform-origin:50% 50%}
.nav__left{display:flex;align-items:center;gap:clamp(18px,2.6vw,44px)}
.nav__links{display:flex;gap:1.5rem;font-size:.95rem}
.nav__links a{text-decoration:none;color:inherit;opacity:.7;transition:opacity .2s}
.nav__links a:hover,.nav__links a:focus-visible{opacity:1}
.nav__brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.nav__brand .mark{width:34px;height:34px}
.nav__brand .word{height:18px;width:81px}
.nav__count{display:flex;align-items:baseline;gap:.45rem;font-size:.92rem;color:var(--gray);white-space:nowrap;opacity:0;transition:opacity .5s var(--ease)}
.nav.has-hours .nav__count{opacity:1}
.nav__num{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--verm-text);min-width:1.4ch;text-align:right;display:inline-block;letter-spacing:-.02em}
.nav__num.is-bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.35)}}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh}
.hero__pin{position:relative;min-height:100vh;height:100svh;overflow:hidden;padding:0 var(--gutter)}
.hero__grid{position:relative;width:min(100%,var(--max));margin-inline:auto;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);grid-template-rows:auto auto 1fr;align-items:start;gap:clamp(18px,3vw,40px) clamp(24px,4vw,64px);padding-top:clamp(84px,12vh,124px);padding-bottom:72px;container-type:inline-size}
.hero__title{grid-column:1/-1;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,8.3cqw,7.6rem);line-height:.96;letter-spacing:-.045em}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;white-space:nowrap}
.hero__title .w{display:inline-block;white-space:pre}
.hero__title .ch{display:inline-block}
.hero__title .bar{position:relative}
.hero__title .tail{width:0;opacity:0;overflow:visible}
.barline{position:absolute;left:-.04em;right:-.04em;top:.5em;height:.09em;background:var(--verm);border-radius:.05em;transform:scaleX(0);transform-origin:left center;pointer-events:none}
.hero__sub{margin:0;font-size:clamp(1.05rem,1.35vw,1.3rem);max-width:34ch;line-height:1.4;color:var(--ink)}
.hero__offer{margin:.9rem 0 0;font-size:clamp(.95rem,1.15vw,1.1rem);color:var(--gray);max-width:36ch}
.hero__after{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.65vw,1.55rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch;opacity:0;transform:translateY(12px);color:var(--ink)}
.hero__after b{color:var(--verm-text)}
.hero__copy{position:relative;grid-column:1;grid-row:2;align-self:start;padding-top:.35em}

.hero__cue{position:absolute;left:var(--gutter);bottom:clamp(18px,3vw,36px);display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--gray);letter-spacing:.01em}
.hero__cueline{width:34px;height:2px;background:var(--verm);transform-origin:left;animation:cue 1.8s var(--ease) infinite}
/* the cue only matters at the very top; stopped afterwards it no longer wakes the style engine every frame */
.nav.is-scrolled~main .hero__cueline{animation:none}
@keyframes cue{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* ledger */
.ledger{position:relative;grid-column:2;grid-row:2;justify-self:end;width:min(100%,640px);background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 24px -18px rgba(34,31,26,.3);font-size:clamp(.78rem,.95vw,.95rem);overflow:visible;transform:rotate(-1.2deg)}
.ledger__bar{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-bottom:1px solid var(--rule-soft);color:var(--gray);font-size:.85em}
.ledger__file{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ledger__clock{margin-left:auto;font-variant-numeric:tabular-nums}
.ledger__head,.row{display:grid;grid-template-columns:1.25fr 1.6fr 1fr .9fr;gap:.6rem;padding:.5rem .9rem;align-items:center}
.ledger__head{color:var(--gray);font-size:.82em;letter-spacing:.02em;border-bottom:1px solid var(--rule-soft)}
.ledger__rows{height:calc(9 * 2.05em);overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.row{flex:none}
.row:not(.is-typing) .a,.ledger__head span:nth-child(3){text-align:right;padding-right:1.2em}
.row{height:2.05em;border-bottom:1px solid var(--rule-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.row span{overflow:hidden;text-overflow:clip;min-width:0}
.row .st{color:var(--gray)}
.row.is-typing .st{color:var(--gray)}
.row .st.ok{color:var(--verm-text);font-weight:500}
.row .caret{display:inline-block;width:.55em;height:1em;background:var(--ink);vertical-align:-.15em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ledger[data-done="1"] .row .st{color:var(--verm-text);font-weight:500}
.ledger[data-done="1"] .row .caret{display:none}
.ledger__foot{display:flex;justify-content:space-between;padding:.55rem .9rem;color:var(--gray);font-size:.85em;font-variant-numeric:tabular-nums}
.ledger__state{color:var(--gray)}
.ledger[data-done="1"] .ledger__state{color:var(--verm-text)}

/* the ball of the mark: it leaves the logo, does the work in the hero and goes home. Fixed, so it can pass over the nav */
.ballfx{--bd:clamp(18px,2.7vw,44px);position:fixed;left:0;top:0;z-index:55;width:var(--bd);height:var(--bd);margin:calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2);border-radius:50%;background:#E8552F;visibility:hidden;pointer-events:none;will-change:transform}

/* stamp */
.stamp{position:absolute;display:inline-block;padding:.35em .6em;border:.14em solid var(--verm);border-radius:.25em;color:var(--verm);font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,2.2rem);letter-spacing:.02em;text-transform:uppercase;line-height:1;transform:rotate(-8deg);opacity:0;pointer-events:none;white-space:nowrap;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");-webkit-mask-size:200px 200px;mask-size:200px 200px}
.stamp--hero{right:-5%;top:30%;z-index:3}
.form__fields{position:relative}
.stamp--form{right:-2%;top:-1.6rem;transform:rotate(9deg);font-size:clamp(1.1rem,2vw,1.8rem)}

@media (max-height:820px){.hero__title{font-size:clamp(1.8rem,6.6cqw,5.8rem)}.ledger{font-size:clamp(.74rem,.85vw,.86rem)}.hero__grid{padding-top:108px;padding-bottom:56px;gap:22px clamp(24px,4vw,64px)}}
@media (max-height:700px){.hero__title{font-size:clamp(1.8rem,6.4cqw,5.4rem)}.ledger__rows{height:calc(7 * 2.05em)}}
@media (min-width:861px) and (max-height:600px){.ledger__rows{height:calc(5 * 2.05em)}.hero__grid{padding-top:88px}}
@media (max-width:860px) and (max-height:800px){.ledger__rows{height:calc(5 * 2.05em)}}
@media (max-width:860px) and (max-height:700px){.ledger__rows{height:calc(4 * 2.05em)}.hero__offer{display:none}}

/* ===== LEISTUNGEN ===== */
.does{padding:clamp(80px,10vw,150px) 0 clamp(96px,12vw,180px)}
.does .h2{max-width:18ch}
.does__list{list-style:none;margin:clamp(20px,3vw,40px) 0 0;padding:0;counter-reset:d}
.does__list a{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;gap:clamp(16px,4vw,64px);align-items:baseline;padding:clamp(16px,2vw,26px) 0 clamp(16px,2vw,26px) 0;border-top:1px solid var(--rule);text-decoration:none;transition:padding-left .5s var(--ease)}
.does__list li:last-child a{border-bottom:1px solid var(--rule)}
/* the ball of the logo rolls in as the bullet */
.does__list a::before{content:"";position:absolute;left:0;top:50%;width:.62em;height:.62em;margin-top:-.31em;border-radius:50%;background:var(--verm);font-size:clamp(1.5rem,3.6vw,3.2rem);transform:translateX(-2.2em) rotate(-180deg);opacity:0;transition:transform .6s var(--ease),opacity .3s}
.does__list a:hover,.does__list a:focus-visible{padding-left:clamp(28px,3.4vw,56px)}
.does__list a:hover::before,.does__list a:focus-visible::before{transform:none;opacity:1}
.does__w{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1.02;letter-spacing:-.04em}
.does__t{max-width:44ch;color:var(--gray)}
.does__t em{display:block;margin-top:.45em;font-style:normal;font-size:.92em;color:var(--ink)}
.does__a{align-self:center;width:clamp(22px,2.2vw,32px);height:auto;fill:none;stroke:var(--verm-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.does__list a:hover .does__a,.does__list a:focus-visible .does__a{transform:translateX(6px)}

/* ===== PROJEKTE ===== */
.works{padding:clamp(88px,11vw,160px) 0 clamp(110px,14vw,210px)}
.works__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,4vw,64px);align-items:end}
.works__head .h2{margin:0}
.works__head .lede{margin:0;font-size:1.02rem;max-width:42ch}
.works__index{position:sticky;top:calc(var(--navh,78px) - 1px);z-index:20;list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.works__index::before{content:"";position:absolute;inset:-1px -50vw;background:var(--bg);z-index:-1}
.works__index a{position:relative;display:flex;align-items:baseline;gap:.6em;padding:.95em 0;text-decoration:none;font-weight:500;color:var(--gray);transition:color .25s}
.works__index a:hover,.works__index a.is-on{color:var(--ink)}
.works__index a::after{content:"";position:absolute;left:0;right:12%;bottom:-1px;height:2px;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.works__index a.is-on::after{transform:scaleX(1)}
.works__index span{font-family:var(--display);font-weight:600;font-size:.72em;color:var(--verm-text)}

.works__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-top:clamp(64px,8vw,120px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.works__cta p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.2vw,2rem);letter-spacing:-.03em;line-height:1.1;max-width:24ch}
/* one project = one package: head with facts, a stage with tabs, real media inside */
.case{padding-top:clamp(72px,9vw,140px)}
.case__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(24px,5vw,88px);align-items:end}
.case__k{grid-column:1/-1;margin:0 0 1rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.case__k span{margin-right:.9em;font-family:var(--display);font-weight:600;color:var(--verm-text);letter-spacing:.02em}
.case__h{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.5vw,3.2rem);line-height:1.02;letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.case__p{margin:0;max-width:46ch;color:var(--gray)}
.case__facts{grid-column:1/-1;list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.case__facts li{padding:.9rem 1rem .2rem 0;font-size:.92rem;color:var(--gray)}
.case__facts b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.3vw,2.1rem);letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.case__stage{margin-top:clamp(24px,3vw,44px)}
.tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.tab{position:relative;padding:.62em 1.05em;border:1px solid var(--rule);border-bottom:0;border-radius:8px 8px 0 0;background:none;color:var(--gray);font:500 .95rem/1 var(--body);cursor:pointer;overflow:hidden;transition:color .25s,background .25s}
body.has-cursor .tab{cursor:none}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--paper);border-color:var(--paper);color:#221F1A}
.tab i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--verm);transform:scaleX(0);transform-origin:left}
.views{--ink:#221F1A;--gray:#6E675C;--rule:rgba(34,31,26,.14);--rule-soft:rgba(34,31,26,.08);--verm:#E8552F;--verm-text:#C93E18;--mk-box:#221F1A;--mk-x:#FBF7F0;--bg:#FFFDF8;position:relative;padding:clamp(14px,2vw,28px);border-radius:0 10px 10px 10px;background:var(--paper);color:var(--ink);box-shadow:0 30px 50px -36px rgba(0,0,0,.6)}
html.js .views{display:grid}
.view{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
html.js .view{grid-area:1/1}
html.js .view:not(.is-on){visibility:hidden;opacity:0;pointer-events:none}
html:not(.js) .tabs{display:none}
html:not(.js) .view+.view{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--rule)}
.view.is-on{animation:viewIn .6s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}
.io.io--row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(20px,4vw,64px);max-width:none;margin-top:clamp(14px,2vw,26px)}
.io--row .io__r,.io--row .io__r:last-child{border-bottom:0}
.io{margin:0;max-width:38ch}
.io__r{display:grid;grid-template-columns:4.2em 1fr;gap:.9rem;padding:.75rem 0;border-top:1px solid var(--rule)}
.io__r:last-child{border-bottom:1px solid var(--rule)}
.io dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding-top:.32em;white-space:nowrap}
.io dd{margin:0;color:var(--gray)}
.io__r--out dt{color:var(--verm-text)}
.io__r--out dd{color:var(--ink);font-weight:500}

@media (min-width:861px){
  .views{--stageh:clamp(400px,calc(100svh - var(--navh,78px) - 300px),580px)}
  .shopdemo{grid-template-columns:minmax(0,calc((var(--stageh) - 38px) * 1.6)) minmax(220px,1fr)}
  .fotodemo{height:var(--stageh);grid-template-rows:minmax(0,1fr)}
  .fotodemo figure,.fotodemo__out{min-height:0}
  .fotodemo__in img{height:0;flex:1 1 0}
  .fotodemo__out>img{aspect-ratio:auto;height:0;flex:1 1 0;min-height:0}
  .view .reel{height:calc(var(--stageh) - 96px)}
  .flyerdemo img{max-height:var(--stageh)}
  .gehirn{aspect-ratio:auto;height:var(--stageh)}
  .ba--skill{aspect-ratio:auto;height:var(--stageh)}
  .ba--skill .skill{align-items:start}
  .ba--skill .skill .term{align-self:center}
  .deck__main{width:100%;max-width:calc((var(--stageh) - 84px) * 16 / 9);justify-self:center}
}
/* the real shop, clickable: three real states of the live site */
.shopdemo{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.34fr);gap:clamp(16px,2.4vw,36px);align-items:start}
.browser{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 18px 30px -22px rgba(34,31,26,.5);background:#fff}
.browser__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#EFEAE0;border-bottom:1px solid var(--rule)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:rgba(34,31,26,.22)}
.browser__url{margin-left:10px;flex:1;min-width:0;padding:.3em .8em;border-radius:99px;background:#fff;color:var(--gray);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__view{position:relative;aspect-ratio:1280/800;cursor:pointer}
body.has-cursor .browser__view{cursor:none}
.browser__view picture{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.browser__view picture.is-on{opacity:1}
.browser__view img{width:100%;height:100%;object-fit:cover;object-position:top}
.hot[hidden]{display:none}
.shopend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem;padding:clamp(18px,4vw,56px);background:rgba(255,253,248,.93);animation:viewIn .5s var(--ease) both;cursor:default}
.shopend[hidden]{display:none}
.shopend p{margin:0}
.shopend__k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.shopend__h{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.035em;max-width:14ch}
.shopend__b{margin-top:.8rem;padding:.7em 1.1em;border:1px solid var(--ink);border-radius:4px;background:none;color:var(--ink);font:500 .95rem/1 var(--body);cursor:pointer;transition:background .3s,color .3s}
.shopend__b:hover{background:var(--ink);color:var(--cream)}
body.has-cursor .shopend__b{cursor:none}
.hot{position:absolute;left:var(--hx,67.8%);top:var(--hy,61%);width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:left .6s var(--ease),top .6s var(--ease)}
.hot span{position:absolute;inset:12px;border-radius:50%;background:var(--verm);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.hot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--verm);animation:ping 1.6s var(--ease) infinite}
@keyframes ping{from{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}
.steps{list-style:none;margin:0 0 1.4rem;padding:0;counter-reset:st}
.steps li{counter-increment:st;display:flex;gap:.8em;align-items:baseline;padding:.55em 0;border-top:1px solid var(--rule);color:var(--gray);transition:color .3s}
.steps li::before{content:counter(st);font-family:var(--display);font-weight:600;font-size:.8em;color:var(--gray)}
.steps li.is-on{color:var(--ink);font-weight:600}
.steps li.is-on::before{color:var(--verm-text)}
.steps li.is-done{text-decoration:line-through;text-decoration-color:var(--verm);text-decoration-thickness:.12em}
.shopdemo__k{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.auto{list-style:none;margin:0 0 1.2rem;padding:0;font-size:.95rem}
.auto li{padding:.32em 0 .32em 1.5em;position:relative}
.auto li{color:var(--gray);transition:color .4s}
.auto li::before{content:"";position:absolute;left:0;top:.62em;width:.62em;height:.62em;border-radius:50%;background:var(--rule);transition:background .4s,transform .5s var(--ease);transition-delay:inherit}
.auto li.is-on{color:var(--ink);font-weight:500}
.auto li.is-on::before{background:var(--verm);transform:scale(1.25)}

.fotodemo{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:stretch}
.fotodemo figure{margin:0;display:flex;flex-direction:column;gap:.6rem}
.fotodemo__in img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:6px;flex:1}
.fotodemo figcaption{font-size:.85rem;color:var(--gray)}
.fotodemo__out{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.fotodemo__out>img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--rule)}
.angs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem}
.ang{padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;font:500 .68rem/1.2 var(--body);color:var(--gray);text-align:center}
body.has-cursor .ang{cursor:none}
.ang img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 0 0 1px var(--rule);transition:box-shadow .25s,transform .35s var(--ease)}
.ang:hover img{transform:translateY(-3px)}
.ang.is-on img{box-shadow:0 0 0 2px var(--verm)}
.ang.is-on{color:var(--ink)}
.view .reel{height:clamp(240px,34vw,470px);flex:none;padding:0 0 1rem}
.reel__cap{margin:0 0 .6rem;font-size:.85rem;color:var(--gray)}
.reel__did{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.95rem}
.reel__did li{position:relative;padding-left:1.3em}
.reel__did li::before{content:"";position:absolute;left:0;top:.5em;width:.55em;height:.55em;border-radius:50%;background:var(--verm)}
.flyerdemo{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(18px,3vw,56px);align-items:center}
.flyerdemo img{width:100%;height:auto;max-height:600px;object-fit:contain;object-position:left;border-radius:4px;filter:drop-shadow(0 18px 22px rgba(34,31,26,.28));transform:rotate(-2deg)}
.flyerdemo__h{margin:0 0 1.2rem;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.08;letter-spacing:-.03em;max-width:16ch}
.flyerdemo__n{margin:1rem 0 0;font-size:.85rem;color:var(--gray)}
.spec{list-style:none;margin:0;padding:0}
.spec li{display:grid;grid-template-columns:7.5em 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--rule)}
.spec li:last-child{border-bottom:1px solid var(--rule)}
.spec b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);font-weight:500;padding-top:.3em}

/* the company brain, in xansa's own hand: paper, ink, one loud colour */
.gehirn{position:relative;aspect-ratio:16/8.6;border-radius:6px;overflow:hidden;background:var(--cream);box-shadow:0 0 0 1px var(--rule)}
.gehirn canvas{position:absolute;inset:0;width:100%;height:100%}
.gehirn__src{position:absolute;left:1.4rem;top:1.3rem;list-style:none;margin:0;padding:0;font-size:.82rem;display:grid;gap:.3rem;min-width:9.5em}
.gehirn__src li{display:flex;justify-content:space-between;gap:1.2em;padding:.28em 0;border-bottom:1px solid var(--rule-soft);color:var(--gray)}
.gehirn__src b{font-weight:500;color:var(--ink)}
.gehirn__src span{font-variant-numeric:tabular-nums}
.gehirn__log{position:absolute;left:1.4rem;bottom:5.2rem;list-style:none;margin:0;padding:.7em .9em;border-radius:5px;background:#1d1a16;color:#cfc8bb;font:500 .74rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.gehirn[data-mode="bau"] .gehirn__log{opacity:1;transform:none}
.gehirn__log li{opacity:.35;transition:opacity .3s}
.gehirn__log li.is-on{opacity:1}
.gehirn__log li.is-on::before{content:"✓ ";color:#F2B33D}
.gehirn__legend{position:absolute;right:1.3rem;top:1.3rem;display:flex;gap:1rem;font-size:.78rem;color:var(--gray)}
.gehirn__legend span::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45em;border-radius:50%;background:var(--c)}
.gehirn .brain__cap{position:absolute;left:1.3rem;right:1.3rem;bottom:1.2rem;display:flex;align-items:center;gap:.4rem;min-height:3.1rem;padding:.35rem .4rem .35rem 1.1rem;border-radius:99px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 10px 22px -16px rgba(34,31,26,.5);font-size:1rem;color:var(--ink)}
.gehirn .brain__cap:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(232,85,47,.22)}
.gehirn .brain__capIn{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:inherit;font:inherit;caret-color:var(--verm);user-select:text;-webkit-user-select:text}
.gehirn .brain__capIn::placeholder{color:var(--gray)}
.gehirn .brain__capS{flex:none;padding:.7em 1.2em;border:0;border-radius:99px;background:var(--ink);color:var(--cream);font:500 .9rem/1 var(--body);cursor:pointer;transition:background .3s}
.gehirn .brain__cap.is-busy .brain__capS{background:var(--gray)}
.gehirn__src .is-sum{border-bottom:0;margin-top:.2rem}
.gehirn__src .is-sum b,.gehirn__src .is-sum span{color:var(--verm-text);font-weight:600}
.gehirn__chips{position:absolute;left:1.3rem;bottom:5.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;max-width:min(46%,30rem)}
.gehirn__chips button{padding:.45em .85em;border:1px solid var(--rule);border-radius:99px;background:var(--paper);color:var(--gray);font:500 .82rem/1.2 var(--body);text-align:left;cursor:pointer;transition:color .25s,border-color .25s,transform .4s var(--ease)}
.gehirn__chips button:hover,.gehirn__chips button:focus-visible{color:var(--ink);border-color:var(--ink);transform:translateX(3px)}
body.has-cursor .gehirn__chips button{cursor:none}
.gehirn .brain__toast{border:0;position:absolute;right:1.3rem;bottom:5.2rem;padding:.55em .9em;border-radius:6px;background:var(--ink);color:var(--cream);font-size:.86rem;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.gehirn .brain__toast.is-on{opacity:1;transform:none}
.brain__answer{position:absolute;right:1.3rem;bottom:5.2rem;max-width:min(44ch,52%);padding:.9em 1.1em;border-radius:8px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 14px 26px -18px rgba(34,31,26,.5);font-size:.95rem;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.brain__answer.is-on{opacity:1;transform:none}
.brain__answer sup{color:var(--verm-text);font-weight:600}
.brain__answer small{display:block;margin-top:.6em;padding-top:.5em;border-top:1px solid var(--rule);color:var(--gray);font-size:.82em}

.deckview{border-radius:6px;overflow:hidden}
.deckview .deck{padding:0;background:none}
.deckview.sc{background:none;font-size:clamp(12px,1.2vw,15.5px)}
.funnel{list-style:none;margin:0;padding:clamp(6px,1vw,14px) 0;display:grid;gap:.7rem}
.funnel li{display:grid;grid-template-columns:clamp(4.2rem,9vw,7.5rem) minmax(0,1fr);gap:1.2rem;align-items:center}
.funnel b{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.funnel span{position:relative;display:block;padding:.95em 1.1em;border-radius:6px;background:var(--cream);color:var(--ink);width:calc(var(--w) * 1%);min-width:min(100%,19em);box-shadow:0 0 0 1px var(--rule);transform-origin:left}
.funnel li:last-child span{background:var(--ink);color:var(--cream)}
.funnelwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.3fr);gap:clamp(18px,3vw,56px);align-items:center}
.funnel__facts{grid-column:auto;grid-template-columns:1fr;margin:0;border-top:0}
.funnel__facts li{padding:.8rem 0;border-top:1px solid var(--rule)}
.okdemo{font-size:1.06rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,2vw,28px);align-items:start;padding:clamp(4px,1vw,14px) 0}
.okdemo .sheet{box-shadow:0 0 0 1px var(--rule),0 16px 26px -20px rgba(34,31,26,.45);border:0}
.dossier{transform:rotate(-.6deg)}
.dossier__l{margin:0;padding:.3rem 1rem .6rem}
.dossier__l div{display:grid;grid-template-columns:6.2em 1fr;gap:.9rem;padding:.6rem 0;border-top:1px solid var(--rule-soft)}
.dossier__l div:first-child{border-top:0}
.dossier__l dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);padding-top:.25em}
.dossier__l dd{margin:0}
.dossier__l b{color:var(--verm-text)}
.blk{display:inline-block;border-radius:2px;background:var(--ink);color:transparent;user-select:none;-webkit-user-select:none;line-height:1.05}
.draft{position:relative;transition:opacity .4s}
.draft__st{font-size:.8rem;color:var(--gray);transition:color .3s}
.draft__b{padding:1rem 1.1rem .4rem;font-size:1.02rem;line-height:1.5}
.draft__b p{margin:0 0 .8em}
.draft__more{color:var(--gray)}
.draft__act{display:flex;flex-wrap:wrap;gap:.5rem;padding:.4rem 1.1rem 1.1rem}
.draft__act button{padding:.7em 1.1em;border:1px solid var(--rule);border-radius:4px;background:none;color:var(--ink);font:500 .95rem/1 var(--body);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
body.has-cursor .draft__act button{cursor:none}
.draft__act button:hover{border-color:var(--ink)}
.draft__act .draft__ok{background:var(--verm-text);border-color:var(--verm-text);color:#FBF7F0}
.draft__act .draft__ok:hover{background:var(--ink);border-color:var(--ink)}
.draft::after{content:"Freigegeben";position:absolute;right:6%;top:34%;padding:.3em .55em;border:.14em solid var(--verm);border-radius:.25em;color:var(--verm);font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.7rem);text-transform:uppercase;letter-spacing:.02em;line-height:1;transform:rotate(-8deg) scale(2.2);opacity:0;pointer-events:none}
.okdemo[data-ok="1"] .draft::after{opacity:1;transform:rotate(-8deg) scale(1);transition:transform .28s cubic-bezier(.9,0,1,1),opacity .2s}
.okdemo[data-ok="1"] .draft__st{color:var(--verm-text);font-weight:600}
.okdemo[data-ok="0"] .draft__b{opacity:.4;text-decoration:line-through;text-decoration-color:var(--verm)}
.okdemo[data-ok="2"] .draft__b{opacity:.6}

/* ===== SCHULUNGEN ===== */
.learnsec{padding:clamp(72px,9vw,130px) 0 clamp(160px,18vw,260px)}
.learnsec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:end}
.learnsec__head .h2{margin:0;max-width:13ch}
.learnsec__head .lede{margin:0;font-size:1.05rem}
.formats{list-style:none;margin:clamp(32px,4vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
/* tilt and lift use the single transform properties: the script animates `transform` on these cards, and a CSS transition on the same property would fight it */
.fmt{padding:clamp(20px,2.4vw,34px);transition:rotate .6s var(--ease),translate .6s var(--ease),box-shadow .6s var(--ease)}
.fmt:nth-child(1){rotate:-1.2deg}.fmt:nth-child(2){rotate:.6deg;translate:0 10px}.fmt:nth-child(3){rotate:-.5deg}
.fmt:hover{rotate:0deg;translate:0 -6px;box-shadow:0 26px 40px -26px rgba(34,31,26,.45)}
.fmt .sheet__tag{display:inline-block;margin-bottom:1.4rem}
.fmt p{margin:0;color:var(--gray)}

/* before / after frame: the bar of the mark crosses the sheet, the work behind it is done.
   The wipe is two opposing transforms on a clipping pair, so nothing repaints while it moves. */
.ba{--bw:3px;position:relative;aspect-ratio:16/10;container-type:inline-size;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba--photo{aspect-ratio:4/3}
.ba--skill{aspect-ratio:16/9}
body.has-cursor .ba,body.has-cursor .ba__knob{cursor:none}
.ba__clip{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:6px;background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 24px 40px -28px rgba(0,0,0,.55)}
.ba__layer{position:absolute;inset:0}
.ba__layer>img{width:100%;height:100%;object-fit:cover}
.ba img{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.ba__after{position:absolute;top:0;bottom:0;left:-100%;width:200%;overflow:hidden;will-change:transform}
.ba__afterIn{inset:0 auto 0 50%;width:50%;transform-origin:0 50%;will-change:transform}
.ba__bar{position:absolute;top:-1.55%;bottom:-1.55%;left:0;width:var(--bw);margin-left:calc(var(--bw) / -2);background:var(--verm);border-radius:99px;transform:rotate(14deg);pointer-events:none;will-change:transform}
.ba__knob{position:absolute;left:0;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;background:none;will-change:transform}
.ba__knobIn{display:block;width:100%;height:100%;border-radius:30%;box-shadow:0 0 0 2px var(--paper),0 10px 18px -8px rgba(34,31,26,.6);transition:transform .35s var(--ease)}
.ba__knob:focus-visible{opacity:1!important}
.ba__knob .mark{display:block;width:100%;height:100%;transition:transform .7s var(--ease)}
.ba:hover .ba__knobIn,.ba.is-drag .ba__knobIn{transform:scale(1.12)}
.ba.is-drag .ba__knob .mark{transform:rotate(360deg)}
.ba__flag{position:absolute;top:50%;padding:.32em .6em;border-radius:3px;background:var(--ink);color:#FBF7F0;font:500 .66rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:translateY(-50%);pointer-events:none}
.ba__flag--a{right:calc(100% + 12px);background:#C93E18}
.ba__flag--b{left:calc(100% + 12px);background:#221F1A}
.ba:not(.is-mid) .ba__flag{display:none}
.ba.is-mid .ba__flag{animation:flag .35s var(--ease) both}
@keyframes flag{from{opacity:0}}
.ba.is-docked .ba__bar{display:none}
html:not(.js) .ba__bar,html:not(.js) .ba__knob{display:none}
.angles{position:absolute;left:3cqw;bottom:3cqw;display:flex;gap:1.2cqw}
.angles img{width:11cqw;height:11cqw;object-fit:cover;border-radius:3px;border:1px solid var(--rule);background:var(--paper)}
.shot{position:absolute;left:3cqw;top:3cqw;padding:.4em .7em;border-radius:3px;background:rgba(255,253,248,.92);color:#221F1A;font:500 clamp(9px,1.4cqw,11.5px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.shot--b{left:auto;right:3cqw;background:rgba(34,31,26,.8);color:#FBF7F0}

/* the sheets inside the frames; type scales with the frame */
.sc{display:flex;flex-direction:column;font-size:clamp(12px,2cqw,15.5px);line-height:1.3;background:var(--paper);color:var(--ink)}
.ba__before.sc{background:#F1ECE1;color:#5F584D}
.sc__bar{display:flex;align-items:center;gap:.8em;padding:.8em 1.1em;border-bottom:1px solid var(--rule-soft);white-space:nowrap;min-width:0}
.sc__file{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.sc__meta{margin-left:auto;color:var(--gray);font-variant-numeric:tabular-nums}
.sc__foot{display:flex;justify-content:space-between;gap:1em;padding:.75em 1.1em;border-top:1px solid var(--rule-soft);color:var(--gray);font-size:.9em;white-space:nowrap;overflow:hidden}
.sc__foot .ok{color:var(--verm-text);font-weight:600}

.tl{display:grid;gap:.9cqw;padding:0 2.6cqw 1.6cqw}
.tl__trk{display:flex;gap:.5cqw;height:3cqw}
.tl__trk i{flex:var(--w) 0 0;border-radius:2px;background:#B7AF9F}
.tl__trk i.is-gap{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(34,31,26,.2) 3px 4px);box-shadow:inset 0 0 0 1px rgba(34,31,26,.22)}
.tl--cut .tl__trk i{background:var(--ink)}
.tl--cut .tl__trk i:nth-child(3n+1){background:var(--verm-text)}
.tl--cut .tl__trk--sub{height:1.6cqw}
.tl--cut .tl__trk--sub i,.tl--cut .tl__trk--sub i:nth-child(3n+1){background:var(--mustard)}
.tl__wave{height:3.2cqw;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px);clip-path:polygon(0 38%,4% 12%,9% 30%,14% 6%,20% 26%,26% 10%,32% 32%,38% 8%,45% 28%,52% 4%,58% 24%,65% 10%,72% 30%,79% 6%,86% 26%,93% 12%,100% 34%,100% 66%,93% 88%,86% 74%,79% 94%,72% 70%,65% 90%,58% 76%,52% 96%,45% 72%,38% 92%,32% 68%,26% 90%,20% 74%,14% 94%,9% 70%,4% 88%,0 62%)}
.tl__wave--raw{background:repeating-linear-gradient(90deg,#8E8678 0 2px,transparent 2px 4px);clip-path:polygon(0 44%,6% 20%,12% 40%,18% 8%,22% 46%,31% 47%,34% 14%,40% 36%,46% 47%,58% 46%,61% 22%,67% 4%,72% 40%,78% 47%,88% 46%,92% 18%,100% 42%,100% 58%,92% 82%,88% 54%,78% 53%,72% 60%,67% 96%,61% 78%,58% 54%,46% 53%,40% 64%,34% 86%,31% 53%,22% 54%,18% 92%,12% 60%,6% 80%,0 56%)}

.pile{position:relative;flex:1;min-height:0}
.doc{position:absolute;left:calc(var(--dx) * 1%);top:calc(var(--dy) * 1%);transform:rotate(calc(var(--dr) * 1deg));background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:.55em .8em;box-shadow:0 6px 10px -8px rgba(34,31,26,.45);white-space:nowrap;font-size:.95em}
.doc--note{background:var(--mustard);border-color:transparent;color:var(--ink);font-weight:500}
.doc--app{padding:.7em 1.1em;font-weight:600;border-radius:5px}

/* Second Brain, as the real app looks: dark, node colours by type, capture bar at the bottom */
.app{background:#0c0c12;color:#d4d4d8;font:400 clamp(9.5px,1.55cqw,12.5px)/1.3 var(--body)}
.brain__net,.brain__dust{position:absolute;inset:0;width:100%;height:100%}
.app__side{position:absolute;left:0;top:0;bottom:0;width:16.5%;padding:1.6cqw 1.3cqw;display:flex;flex-direction:column;gap:.5em;background:#101018;border-right:1px solid rgba(255,255,255,.07)}
.app__logo{display:grid;place-items:center;width:2.3em;height:2.3em;margin-bottom:.5em;border-radius:.55em;background:#6366f1;color:#fff;font-weight:700}
.app__sec{margin-top:.8em;font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:#71717a}
.app__side span:not(.app__sec){padding:.38em .6em;border-radius:.45em;color:#a1a1aa}
.app__side .is-on{background:rgba(99,102,241,.2);color:#e0e7ff}
.app__top{position:absolute;left:19%;right:2.4cqw;top:1.7cqw;display:flex;align-items:center;gap:.5em}
.app__top b{margin-right:.8em;font-size:1.3em;font-weight:600;color:#fafafa}
.app__tab{padding:.3em .85em;border-radius:99px;color:#a1a1aa}
.app__tab.is-on{background:#27272a;color:#fafafa}
.brain__stat{margin-left:auto;color:#a1a1aa;font-variant-numeric:tabular-nums}
.app__legend{position:absolute;left:19%;right:2.4cqw;top:6.4cqw;display:flex;flex-wrap:wrap;gap:.45em}
.app__legend span{display:inline-flex;align-items:center;gap:.45em;padding:.22em .7em;border-radius:99px;background:#18181b;border:1px solid #3f3f46;font-size:.86em}
.app__legend span::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--c)}
.brain__cap{position:absolute;left:19%;right:2.4cqw;bottom:2cqw;display:flex;align-items:center;gap:.25em;min-height:3.3em;padding:.45em .55em .45em 1em;border-radius:.8em;background:#18181b;border:1px solid #3f3f46;color:#fafafa;font-size:1.05em}
.brain__capIn{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:inherit;font:inherit;caret-color:#a5b4fc;user-select:text;-webkit-user-select:text;cursor:text}
.brain__capIn::placeholder{color:#71717a}
.brain__cap:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.brain__capS{cursor:pointer}
.brain__capS{flex:none;margin-left:auto;padding:.55em 1em;border-radius:.55em;background:#6366f1;color:#fff;font-weight:600;font-size:.9em;transition:background .3s}
.brain__cap.is-busy .brain__capS{background:#3f3f46;color:#d4d4d8}
.brain__toast{position:absolute;right:2.4cqw;bottom:9cqw;padding:.55em .9em;border-radius:.6em;background:#1e1b4b;border:1px solid #4f46e5;color:#e0e7ff;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.brain__toast.is-on{opacity:1;transform:none}

/* terminal panels: what actually gets typed, and what the quality gate reports back */
.term{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:.3em;min-width:0;padding:1.1em 1.2em;border-radius:5px;background:#1d1a16;color:#cfc8bb;font:500 .84em/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}
.term>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__p{color:#fff}
.term ul{list-style:none;margin:.8em 0 0;padding:0}
.term li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term em{font-style:normal;color:#8f887c}
.gate li::before{content:"✓ ";color:#F2B33D}
html.js .ba:not(.is-done) .gate li{opacity:.25}
html.js .ba:not(.is-done) .gate li::before{content:"· "}
.ba.is-done .gate li{animation:tick .5s var(--ease) both}
.ba.is-done .gate li:nth-child(2){animation-delay:.18s}.ba.is-done .gate li:nth-child(3){animation-delay:.36s}.ba.is-done .gate li:nth-child(4){animation-delay:.54s}.ba.is-done .gate li:nth-child(5){animation-delay:.72s}
@keyframes tick{from{opacity:.25;transform:translateX(-6px)}}
.tree li::before{content:"├ ";color:#6E675C}
.term--old{background:#E2DBCC;color:#5F584D}
.term--old .term__p{color:#2f2a23}
.guess li{display:flex;justify-content:space-between;gap:1em;padding:.32em 0;border-top:1px solid rgba(34,31,26,.12)}
.guess em{color:#9A3A1A}
.term--line{flex:none;flex-direction:row;justify-content:space-between;gap:1.5em;align-self:auto;margin:0 2.6cqw 1.6cqw;padding:.7em 1em}
.term--line b{color:#F2B33D;font-weight:600}

.deck,.skill,.raw{flex:1;min-height:0;display:grid;grid-template-columns:31% minmax(0,1fr);gap:2.4cqw;align-items:center;padding:2cqw 2.6cqw}
.deck__side{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:.5em;min-width:0}
.deck__k{font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.deck__todo{list-style:none;margin:0;padding:0}
.deck__todo li{position:relative;padding:.55em 0 .55em 1.7em;border-top:1px solid rgba(34,31,26,.1)}
.deck__todo li::before{content:"";position:absolute;left:0;top:.62em;width:1em;height:1em;border:1.5px solid currentColor;border-radius:3px;opacity:.55}
.deck__main{display:flex;flex-direction:column;gap:1.3cqw;min-width:0}
.deck__big{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--rule),0 12px 22px -16px rgba(34,31,26,.5)}
.deck__big img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s}
.deck__big img.is-on,.deck__big img:first-of-type:not(.is-off){opacity:1}
.deck__prog{position:absolute;left:0;bottom:0;z-index:2;width:100%;height:3px;background:var(--verm);transform:scaleX(0);transform-origin:left}
.deck__strip button{padding:0;border:0;background:none;cursor:pointer;border-radius:2px;transition:transform .3s var(--ease)}
body.has-cursor .deck__strip button{cursor:none}
.deck__strip button:hover{transform:translateY(-2px)}
.deck__big--blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;font-family:Arial,Helvetica,sans-serif;color:#9a9a9a}
.deck__big--blank b{padding:.45em 1.3em;border:1px dashed #c4c4c4;font-weight:400;font-size:1.9em}
.deck__big--blank span{padding:.4em 1.1em;border:1px dashed #c4c4c4;font-size:1.1em}
.deck__strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.8cqw}
.deck__strip img,.deck__strip i{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:2px;background:#fff;box-shadow:0 0 0 1px var(--rule);object-fit:cover}
.deck__strip button.is-on img{box-shadow:0 0 0 2px var(--verm)}
.skill{grid-template-columns:minmax(0,1fr) 36%;align-items:center}
.skill .term{align-self:center;font-size:.95em;padding:1.3em 1.4em}
.learn{border-top:1px solid rgba(255,255,255,.12);padding-top:.8em!important}
.learn li{color:#F2B33D;white-space:normal}
.learn li::before{content:"gelernt ";color:#8f887c}
.skill__doc{transform:rotate(1.4deg);border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 16px 28px -18px rgba(34,31,26,.55)}
.skill__doc img{width:100%;height:auto}
.raw{grid-template-columns:36% minmax(0,1fr)}
.raw .tl{padding:0}
.tree--dirs{list-style:none;margin:0;padding:0;font:500 1em/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}
.raw .tl__trk{height:4.6cqw}
.raw .tl__wave{height:5cqw}
.tree--dirs em{font-style:normal;opacity:.6}
.reel{flex:1;min-height:0;display:flex;justify-content:center;gap:1.6cqw;padding:2cqw 2.6cqw 1.4cqw}
.reel img{flex:1 1 0;min-width:0;max-width:calc((100cqw / 16 * 10 - 17cqw) * .5625);height:100%;object-fit:cover;border-radius:4px}
.ba.is-done .reel img{animation:settle .9s var(--ease) both}
.ba.is-done .reel img:nth-child(2){animation-delay:.08s}.ba.is-done .reel img:nth-child(3){animation-delay:.16s}.ba.is-done .reel img:nth-child(4){animation-delay:.24s}
@keyframes settle{from{transform:translateY(10px) scale(.97)}}
@container (max-width:520px){
  .app__side{display:none}
  .app__top,.app__legend,.brain__cap{left:3cqw}
  .app__legend span:nth-child(n+5){display:none}
  .deck,.raw{grid-template-columns:minmax(0,1fr);gap:1.6cqw;align-content:center}
  .deck__todo li:nth-child(n+3),.deck .gate li:nth-child(n+3){display:none}
  .deck .term{padding:.7em .9em}
  .deck .term ul{margin-top:.3em}
  .skill{grid-template-columns:minmax(0,1fr) 40%}
  .tree li:nth-child(n+4),.skill .gate li:nth-child(n+2){display:none}
  .tree--dirs li:nth-child(n+6){display:none}
  .term--line{flex-direction:column;gap:.2em}
  .sc__foot span:last-child{display:none}
  .shot--b{display:none}
  .reel img{max-width:none}
}

/* ===== STREICHEN ===== */
section{position:relative}
.strike{padding:clamp(96px,12vw,180px) 0 clamp(40px,5vw,72px)}
.strike .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:48px;align-items:start}
.strike__kick{grid-column:1/-1;grid-row:1;margin:0 0 1.1rem;font-size:1.02rem;color:var(--gray)}
.strike .h2{grid-column:1;grid-row:2;margin-bottom:.5em}
.strike .lede{grid-column:2;grid-row:2;align-self:end;font-size:1.02rem;margin-bottom:2.2rem}
.strike__done{grid-column:1/-1}
.tasks{grid-column:1}
.only-touch{display:none}
@media (pointer:coarse){.only-fine{display:none}.only-touch{display:inline}}
.tasks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px);align-content:start}
.tasks li{display:contents}
.task{--h:2;font-family:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;padding:.72em 0;border:0;border-top:1px solid var(--rule);border-radius:0;background:none;font-weight:500;font-size:calc(1rem + var(--h) * .11rem);line-height:1.15;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:color .35s,border-color .35s,background .35s;touch-action:manipulation}
.task__main{position:relative;display:inline-block}
.task__how{display:none;font-family:var(--body);font-weight:400;font-size:.85rem;letter-spacing:0;color:var(--gray);margin-top:.35rem;max-width:36ch;line-height:1.35;white-space:normal}
.task__x{position:absolute;left:-6%;top:-.3em;width:112%;height:calc(100% + .6em);pointer-events:none;overflow:visible}
.task__x path{fill:none;stroke:var(--verm);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.task__x,.foot__u{clip-path:inset(-60% 105% -60% -5%)}
.task__h{position:absolute;right:.4em;top:-.9em;font-family:var(--display);font-weight:600;font-size:.7em;color:var(--verm-text);opacity:0;pointer-events:none}
.tasks li:nth-last-child(-n+2) .task{border-bottom:1px solid var(--rule)}
.task.is-done,.task.is-demo{color:var(--gray)}
.task__main{transition:transform .35s var(--ease)}
@media (hover:hover){.task:not(.is-done):hover .task__main{transform:translateX(.35em)}.task:not(.is-done):hover{border-top-color:var(--ink)}}
.task:not(.is-done):focus-visible .task__main{transform:translateX(.35em)}

.last{grid-column:2;position:sticky;top:112px;margin:0;width:100%;padding:1rem 0 0;border-top:2px solid var(--verm);color:var(--ink);display:flex;flex-direction:column;gap:.35rem;z-index:5}
.last__k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.last__t{position:relative;display:inline-block;align-self:flex-start;font-family:var(--body);font-weight:600;font-size:clamp(1.15rem,1.4vw,1.3rem);color:var(--ink);line-height:1.2;white-space:nowrap}
.last__x{left:-3%;width:106%;top:-.2em;height:calc(100% + .4em)}
.last__how{font-size:1rem;line-height:1.4;color:var(--gray);max-width:30ch}

.strike__done{display:none;margin-top:2.5rem;max-width:56ch;font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.35}

.strike__done.is-on{display:block;animation:rise .8s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.strike__done p{margin:0}
.strike__done b{color:var(--verm-text);font-family:var(--display);font-weight:600}

/* ===== RECHNER ===== */
.calc{padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,128px)}
.calc .h2{font-size:clamp(1.25rem,1.6vw,1.5rem);max-width:none;margin-bottom:1.5rem;letter-spacing:-.02em}
.calc__out{container-type:inline-size}
.stat--verm .stat__n{font-size:min(clamp(3.2rem,8vw,7.5rem),calc(100cqw / (var(--len,8) * .64)))}
.calc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:stretch;margin-top:1rem}
.range{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:end;margin-bottom:2.2rem}
.range__label{font-size:1.05rem;color:var(--ink)}
.range__out{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1;text-align:right;min-width:2.2ch}
.range__in{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0}
.range__in::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--fill,0%),var(--rule) var(--fill,0%));border-radius:2px}
[data-world="mustard"] .range__in::-webkit-slider-thumb{background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
[data-world="mustard"] .range__in::-moz-range-thumb{background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.range__in::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--fill,0%),var(--rule) var(--fill,0%));border-radius:2px}
.range__in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-13px;border-radius:50%;background:var(--verm);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--verm);transition:transform .2s var(--ease)}
.range__in::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--verm);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--verm)}
.range__in:hover::-webkit-slider-thumb,.range__in:active::-webkit-slider-thumb{transform:scale(1.2)}
.calc__note{color:var(--gray);font-size:.95rem;max-width:40ch;margin:0}
.calc__prefill{margin:0 0 .8rem;font-size:1rem;color:var(--ink);max-width:40ch}
.calc__prefill:empty{display:none}
.calc__prefill b{color:var(--verm-text)}
.calc__out{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px);padding:clamp(22px,3vw,44px);border-radius:10px;background:#F2B33D;--gray:rgba(34,31,26,.78);--rule:rgba(34,31,26,.3);transform:rotate(.8deg);box-shadow:0 22px 36px -28px rgba(34,31,26,.45)}
.calc__out .stat--verm .stat__n{color:var(--ink)}
.stat{display:flex;flex-direction:column;gap:.35rem}
.stat__n{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5.4vw,5rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat--verm .stat__n{color:var(--verm)}
[data-world="mustard"] .stat--verm .stat__n{color:var(--ink)}
.stat__l{color:var(--gray);font-size:1.02rem;max-width:34ch}
.calc__foot{margin:3rem 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
.calc__foot p{margin:0;font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:44ch}

/* ===== ABLAUF ===== */
.flow{padding:0 0 clamp(40px,5vw,72px)}
.flow__pin{padding-top:clamp(96px,13vw,160px);box-sizing:border-box}
.fsteps{list-style:none;margin:1rem 0 0;padding:0}
.fstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(20px,2.5vw,36px) 0;border-top:1px solid var(--rule)}
.fstep__w{position:relative;display:table;font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,6.4vw,6rem);line-height:1.04;letter-spacing:-.045em;color:var(--ink)}
.fstep__x{left:-2%;width:104%;top:.1em;height:84%}
.fstep__x path{stroke-width:9}
.step__h{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2vw,1.85rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 .7em;text-wrap:balance}
.fstep__t p{margin:0;max-width:48ch}
.flow--staged .flow__pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:24px}
.flow--staged .fsteps{position:relative}
.flow--staged .fstep{display:block;padding:0;border:0}
.flow--staged .fstep__t{position:absolute;left:54%;right:0;top:50%}
.sample{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start;margin-top:clamp(56px,7vw,96px)}
.sample__h{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,2vw,1.85rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 .8em;text-wrap:balance}
.sample__copy p{margin:0;max-width:40ch}
.sheet{background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 24px -18px rgba(34,31,26,.3);font-size:clamp(.85rem,1vw,1rem)}
.sheet__bar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--rule-soft)}
.sheet__file{font-weight:500}
.sheet__tag{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:var(--mustard);color:var(--ink);padding:.2em .55em;border-radius:3px}
.sheet__table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sheet__table th{text-align:left;font-weight:400;color:var(--gray);font-size:.82em;padding:.6rem 1rem;border-bottom:1px solid var(--rule-soft)}
.sheet__table td{padding:.65rem 1rem;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.sheet__table tr:last-child td{border-bottom:0}
.sheet__table td:last-child{color:var(--gray)}
.sheet__table td.is-go{color:var(--verm-text);font-weight:600}

/* ===== EHRLICH ===== */
.honest{padding:clamp(120px,16vw,220px) 0 clamp(96px,14vw,200px)}
.honest__grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.honest__toy{position:sticky;top:clamp(96px,14vh,150px);width:min(100%,clamp(150px,18vw,250px));justify-self:start}
.toy svg{display:block;width:100%;height:auto;overflow:visible}
.honest__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.honest__list li{padding:1.1rem 0;border-top:1px solid rgba(251,247,240,.18);font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.35;color:rgba(251,247,240,.72)}
.honest__list b{color:var(--cream);font-weight:500}
.honest__list li:last-child{border-bottom:1px solid rgba(251,247,240,.18)}
.honest .h2{color:var(--cream)}

/* ===== KONTAKT ===== */
.contact{padding:clamp(96px,14vw,200px) 0 clamp(150px,17vw,250px)}
.form{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(24px,4vw,64px);align-items:start;background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:clamp(22px,3vw,44px);transform:rotate(-1.2deg);box-shadow:0 24px 40px -30px rgba(34,31,26,.35)}
.form__intro{container-type:inline-size}
.form__intro .h2{margin-bottom:.6em;max-width:none;font-size:clamp(1.4rem,8.2cqw,3.4rem)}
.form__intro .lede{margin-bottom:0}
.form__fields{display:grid;gap:1.25rem}
.receipt{list-style:none;margin:1.6rem 0 0;padding:0;max-width:34ch;font-size:.98rem}
.receipt li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-top:1px solid var(--rule-soft);color:var(--gray)}
.receipt s{text-decoration-color:var(--verm);text-decoration-thickness:.12em}
.receipt span{font-variant-numeric:tabular-nums;white-space:nowrap}
.receipt .receipt__sum{border-top:1px solid var(--ink);color:var(--ink);font-weight:600}
.receipt .receipt__sum b{font-family:var(--display);color:var(--verm-text)}
.field{position:relative;display:grid;gap:.4rem}
.field__l{font-size:.95rem;color:var(--gray)}
.field__in{font:500 1.15rem/1.3 var(--body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:.5rem 0;border-radius:0;transition:border-color .3s;width:100%;box-sizing:border-box}
.field__in--ta{resize:none;overflow:hidden;min-height:2.4em;field-sizing:content;font-family:var(--body)}
.field__in:focus{outline:0;border-bottom-color:var(--ink)}
.field__in::placeholder{color:rgba(34,31,26,.62)}
.field__ghost{position:absolute;left:0;bottom:.55rem;font:500 1.15rem/1.3 var(--body);color:var(--ink);pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}
.field__ghost .caret{display:inline-block;width:2px;height:1.05em;background:var(--verm-text);vertical-align:-.18em;margin-left:1px;animation:blink 1s steps(2) infinite}
.field--you .field__in{border-bottom-color:var(--rule)}
.field--you.is-you .field__in{border-bottom:2px solid var(--verm-text)}
.field__in:focus-visible{box-shadow:0 1px 0 var(--ink)}
.field--you.is-you .field__in:focus{border-bottom-color:var(--ink)}
.field__hint{font-size:.9rem;color:var(--verm-text);opacity:0;transform:translateY(-4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.field--you.is-you .field__hint{opacity:1;transform:none}
.form__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.4rem}
.form__alt{margin:0;color:var(--gray);font-size:.98rem}
.form__err{margin:0;color:var(--verm-text);font-size:.95rem}
.form__err:empty{display:none}
.form__next{margin:.2rem 0 0;font-size:.98rem;color:var(--ink);max-width:48ch}
.form__legal{margin:0;font-size:.85rem;color:var(--gray)}
.form__ok{position:relative;padding:1.4rem 0 .4rem}
.form__copy:not([hidden]){display:grid;gap:.8rem;margin-top:1rem}   /* the class used to out-rank [hidden]: the copy block showed after every send */
.form__ta{font:400 .95rem/1.45 var(--body);color:var(--ink);background:var(--cream);border:1px solid var(--rule);border-radius:4px;padding:.8rem;width:100%;resize:vertical}
.form__copy .btn{justify-self:start}
.form__okT{margin:0;font-size:clamp(1.1rem,1.5vw,1.35rem);max-width:34ch;line-height:1.35}
.form.is-sent .field,.form.is-sent .form__row,.form.is-sent .form__next,.form.is-sent .form__legal,.form.is-sent .stamp--form{display:none}
.form.is-flat{transform:none}

/* ===== FOOTER ===== */
.foot{padding:clamp(24px,4vw,64px) 0 clamp(28px,4vw,48px)}
.foot__big{margin:0 0 clamp(40px,6vw,90px);font-family:var(--display);font-weight:600;font-size:clamp(2rem,7vw,6.6rem);line-height:.98;letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,30vw,430px);gap:clamp(16px,3vw,48px);align-items:end;margin-bottom:clamp(40px,6vw,90px)}
.foot__top .foot__big{margin-bottom:0}
/* the logo as a toy: the ball runs in the groove of the X and always ends up where the logo wants it */
.run{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer}
body.has-cursor .run{cursor:none}
.foot__u{position:absolute;left:-1%;width:102%;bottom:-.06em;height:.2em;overflow:visible;pointer-events:none}
.foot__u path{fill:none;stroke:var(--verm);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;font-size:.98rem;color:var(--gray);align-items:center}
.foot__brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)}
.foot__brand .mark{width:26px;height:26px}
.foot__legal em{font-style:normal;color:rgba(110,103,92,.6)}

/* split masks */
.split .ln{overflow:hidden;display:block;padding-bottom:.12em;margin-bottom:-.12em}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero__cueline{animation:none}
  html.js .hero__title,html.js .hero__sub,html.js .hero__offer,html.js .ledger,html.js .hero__cue,html.js .nav{visibility:visible}
  .hero__cue{display:none}
  .ballfx{display:none}
  .hot::before{animation:none}
  .view.is-on{animation:none}
  .stamp{opacity:1}
  .hero__after{opacity:1;transform:none}
  .barline{transform:scaleX(1)}
  .hero__title .ch--bar{opacity:.25}
  .btn::before{transition:none}
}

/* ===== responsive ===== */
@media (min-width:861px) and (max-height:780px){.works__index{position:static}}
@media (max-width:1100px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(280px,.95fr)}
  .nav__links{display:none}
}
@media (max-width:860px){
  .hero__pin{height:auto;min-height:100svh}
  .hero__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-items:start;align-content:start;padding-top:88px;padding-bottom:56px;gap:16px}
  .hero__sub{font-size:1rem;max-width:32ch}
  .hero__after{font-size:1rem}
  .hero__title{font-size:clamp(1.7rem,8.3cqw,3.8rem)}
  .hero__title{grid-column:1;grid-row:1}
  .hero__copy{grid-column:1;grid-row:2;padding-top:0}
  .hero__offer{margin-top:.6rem;font-size:.92rem}
  .hero__after{grid-column:1;grid-row:2;align-self:start;justify-self:start;margin:0;font-size:1.2rem;max-width:20ch}
  .ledger{grid-column:1;grid-row:3;justify-self:stretch;width:100%;transform:rotate(0);font-size:.8rem;margin-top:.2rem}
  .ledger__rows{height:calc(7 * 2.05em)}
  .ledger__head,.row{grid-template-columns:1.15fr 1.45fr 1fr .8fr;gap:.45rem;padding:.5rem .7rem}
  .ledger__bar,.ledger__foot{padding-left:.7rem;padding-right:.7rem}
  .stamp--hero{right:2%;top:30%}
  .works__head{grid-template-columns:1fr;gap:1rem;align-items:start}
  .works__index{display:none}
  .does__list a{grid-template-columns:1fr;gap:.5rem}
  .case__head,.learnsec__head{grid-template-columns:1fr;row-gap:1rem;align-items:start}
  .case__facts{grid-template-columns:1fr 1fr}
  .case__facts li:nth-child(3){grid-column:1/-1}
  .views{padding:12px;border-radius:0 8px 8px 8px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;min-height:44px;padding:.7em .85em;font-size:.88rem;white-space:nowrap}
  .view .reel{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:8px}
  .view .reel img{max-width:none;width:100%;height:auto;aspect-ratio:9/13;object-fit:cover}
  .reel__did{flex-direction:column}
  html.js .view:not(.is-on){display:none}
  .browser__view{aspect-ratio:390/640}
  .funnelwrap,.okdemo{grid-template-columns:1fr}
  .funnel__facts{grid-template-columns:1fr 1fr}
  .dossier{transform:none}
  .gehirn__chips{left:0;right:0;bottom:4.9rem;max-width:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:0 .9rem;scrollbar-width:none}
  .gehirn__chips::-webkit-scrollbar{display:none}
  .gehirn__chips button{flex:none;white-space:nowrap;min-height:40px}
  .gehirn.has-out .gehirn__chips{display:none}
  .skill__side,.deck__side{display:none}
  .deck,.skill{grid-template-columns:minmax(0,1fr)}
  .does__a{display:none}
  .io.io--row{grid-template-columns:1fr}
  .shopdemo,.fotodemo,.flyerdemo{grid-template-columns:1fr}
  .angs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fotodemo__in img{aspect-ratio:4/3;object-position:50% 20%}
  .flyerdemo img{max-height:360px}
  .gehirn{aspect-ratio:3/4}
  .gehirn__src,.gehirn__legend{display:none}
  .brain__answer{left:.9rem;right:.9rem;max-width:none}
  .formats{grid-template-columns:1fr}
  .fmt:nth-child(n){rotate:none;translate:none}
  .works__group{margin-top:56px}
  .work{grid-template-columns:1fr;gap:0;padding-top:64px}
  .work__cap{display:contents}
  .ba{order:2;margin:.2rem 0 1.4rem}
  .io{order:3;max-width:none}
  .work__h{max-width:16ch}
  .ba--ui{aspect-ratio:1/1}
  .ba--skill{aspect-ratio:100/150}
  .ba--skill .skill{padding:3cqw 4cqw}
  .ba--deck{aspect-ratio:4/5}
  .ba__knob{width:40px;height:40px;margin:-20px 0 0 -20px}
  .works{padding-bottom:88px}
  .calc__grid,.honest__grid{grid-template-columns:1fr}
  .sample{grid-template-columns:1fr}
  .sheet{font-size:.85rem}
  .sheet__table th,.sheet__table td{padding:.6rem .7rem}
  .foot__u path{stroke-width:4}
  .foot__top{grid-template-columns:1fr}
  .run{width:min(100%,300px)}
  .fstep{grid-template-columns:1fr;gap:.6rem;padding:1.6rem 0}
  .fstep__w{font-size:2.3rem}
  .strike .wrap{display:block}
  .last{display:none}
  .tasks{grid-template-columns:1fr}
  .task{padding:.9em 0;font-size:calc(.95rem + var(--h) * .09rem);white-space:normal}
  .tasks li:nth-last-child(2) .task{border-bottom:0}
  .strike .lede{font-size:clamp(1.05rem,1.4vw,1.35rem)}
  .task.is-done .task__how{display:block}
  .calc__out{order:-1;position:sticky;top:60px;z-index:4;transform:none;padding:14px 16px;gap:4px 14px;flex-direction:row;flex-wrap:wrap;align-items:baseline;border-radius:8px}
  .calc__out .stat{flex-direction:row;align-items:baseline;gap:.4rem}
  .calc__out .stat__l{font-size:.8rem;max-width:none}
  .calc__out .stat--verm{flex-basis:100%;order:-1}
  .calc__out .stat--verm .stat__l{display:none}
  .calc__out .stat__n{font-size:1.25rem}
  .calc__out .stat--verm .stat__n{font-size:2.3rem}
  .calc__grid{display:flex;flex-direction:column;gap:1.4rem}
  .honest__toy{position:static;width:min(40%,150px);justify-self:start;margin-bottom:8px}
  .honest{padding-top:clamp(120px,16vw,220px)}
  .form{grid-template-columns:1fr;row-gap:1.6rem;transform:none}
  .stamp--form{position:static;justify-self:start;margin:-.3rem 0 .2rem;font-size:1.15rem}
  .nav__unit{display:none}
  .nav__count{gap:.3rem}
  .nav__count::after{content:"h/Woche";font-size:.85rem;color:var(--gray)}
}
@media (max-width:520px){
  .btn--nav{padding:.65em .9em;font-size:.88rem}
  .works__cta .btn{width:100%}
  .row .n,.ledger__head span:first-child{display:none}
  .ledger__head,.row{grid-template-columns:1.6fr 1fr .8fr}
  .stat__n{font-size:2.4rem}
  .form__row{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){.btn--nav{padding:.6em .7em;font-size:.82rem}.nav__brand .word{width:70px;height:16px}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.hero__after{grid-row:4}}

/* honeypot for the contact form: never visible, never focusable, bots fill it anyway */
.field__hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}