/* Loopmate website. Brand: the looks "kalk" (stone paper, ink) and "graphit" (graphite stage) of our
   own pitch films; agent blue for what the agent does, action amber only for "talk to us", teal for
   done. Archivo + IBM Plex Mono. One signature moment (the live composition in the hero); everything
   else moves only when the visitor acts. See agents/web/brand-spec.md. */
@font-face{font-family:Archivo;src:url(fonts/Archivo-var-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/IBMPlexMono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --paper:#ECEEEA;--paper-2:#F8F9F6;--line:#C9CEC6;--ink:#15181B;--muted:#5B6268;
  --gr:#0F1113;--gr-2:#171A1E;--gr-3:#1E2227;--gr-line:#2A2F35;--gr-text:#ECE9E3;--gr-muted:#8E949B;
  --blue:#2E47FF;--blue-d:#8496FF;--amber:#F2A541;--amber-2:#F5B566;--teal:#1F7A68;--teal-d:#6FB7A8;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* headline tracking for Archivo 800: tighter lets r/z, z/a and s/t touch ("erzählst", owner 2026-10-11) */
  --track-display:-.02em;--track-title:-.018em;--track-heading:-.015em;--wide:1180px;--mono:Plex,ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--blue)}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--blue-d)}
.wrap{max-width:var(--wide);margin:0 auto;padding-left:24px;padding-right:24px}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.draft{background:#3a2a10;color:#ffd9a8;text-align:center;font:500 13px/1.4 var(--mono);padding:7px 12px}
.draft-note{font:500 13px/1.5 var(--mono);color:#ffd9a8;margin-top:10px}
.dark{background:var(--gr);color:var(--gr-text)}

/* header */
header.site{position:sticky;top:0;z-index:30;background:rgba(15,17,19,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--gr-line);color:var(--gr-text)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--gr-text);text-decoration:none}
.brand img{width:36px;height:24px}
nav{margin-left:auto;display:flex;gap:2px;align-items:center}
nav a{color:var(--gr-muted);text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:8px}
nav a:hover{color:var(--gr-text);background:var(--gr-2)}
nav a.go{background:var(--amber);color:var(--ink);margin-left:8px}nav a.go:hover{background:var(--amber-2);color:var(--ink)}
/* language: DE | EN after the menu (same page in the other language), a small note when the browser prefers it */
.langs{display:flex;align-items:center;margin-left:6px;font:500 13px/1 var(--mono);letter-spacing:.04em}
.langs a,.langs .cur{padding:8px 7px;border-radius:6px;color:var(--gr-muted);text-decoration:none}
.langs .cur{color:var(--gr-text)}.langs a:hover{color:var(--gr-text);background:var(--gr-2)}
.langs>*+*{border-left:1px solid var(--gr-line);border-radius:0 6px 6px 0}.langs>*:first-child{border-radius:6px 0 0 6px}
.lang-note{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;padding:10px 16px;
  background:var(--gr-2);color:var(--gr-text);font-size:15px;border-bottom:1px solid var(--gr-line)}
.lang-note .go{color:var(--blue-d);font-weight:600}
.lang-note button{background:none;border:1px solid var(--gr-line);color:var(--gr-text);border-radius:8px;padding:6px 12px;font:inherit;cursor:pointer}
.lang-note button:hover{background:var(--gr-3)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:10px;font:700 17px/1 Archivo,sans-serif;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--amber);color:var(--ink)}.btn.go:hover{background:var(--amber-2)}
.btn.quiet{border-color:var(--gr-line);color:var(--gr-text);background:transparent}.btn.quiet:hover{background:var(--gr-2)}
.btn.line{border-color:var(--line);color:var(--ink);background:transparent}.btn.line:hover{background:var(--paper-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* hero */
.hero{padding:76px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.eyebrow{font:500 13px/1.4 var(--mono);color:var(--blue-d);margin:0 0 18px;letter-spacing:.04em}
.hero h1{font-weight:800;font-size:clamp(46px,6.6vw,98px);line-height:.96;letter-spacing:var(--track-display);margin:0 0 26px}
.hero h1 em{font-style:normal;color:var(--blue-d)}
.lead{font-size:clamp(18px,1.7vw,21px);color:var(--gr-muted);max-width:34ch;margin:0 0 32px}
.lead b{color:var(--gr-text);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.promise{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px;font:500 13px/1.6 var(--mono);color:var(--gr-muted)}
.promise li::before{content:"— ";color:var(--teal-d)}

/* the live composition (signature moment) */
.comp{position:relative;background:var(--gr-2);border:1px solid var(--gr-line);border-radius:14px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.comp-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--gr-line);font:500 12.5px/1 var(--mono);color:var(--gr-muted)}
.comp-head .rec{width:8px;height:8px;border-radius:50%;background:var(--gr-line);transition:background .3s}
.comp[data-phase="hear"] .rec{background:var(--amber)}.comp[data-phase="build"] .rec,.comp[data-phase="play"] .rec,.comp[data-phase="edit"] .rec{background:var(--blue-d)}
.comp[data-phase="done"] .rec{background:var(--teal-d)}
.comp-head .clock{margin-left:auto;color:var(--gr-text);font-variant-numeric:tabular-nums}
.voice{display:grid;grid-template-columns:52px 72px 1fr;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--gr-line);min-height:96px}
.lab{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--gr-muted)}
.wave{display:flex;gap:3px;align-items:center;height:30px}
.wave i{flex:1;height:4px;border-radius:2px;background:var(--gr-line);transition:height .12s linear,background .3s}
.comp[data-phase="hear"] .wave i{background:var(--amber)}
.say{margin:0;font-size:15.5px;line-height:1.45;color:var(--gr-text);min-height:2.9em}
.say .caret{display:inline-block;width:2px;height:1em;vertical-align:-2px;margin-left:1px;background:var(--amber);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.lanes{position:relative;padding:14px 16px 16px}
.lane{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.lane:last-child{margin-bottom:0}
.track{position:relative;height:46px}
.lane.txt .track{height:30px}.lane.snd .track{height:34px}
.clipbox{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--paper);color:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:5px 7px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .3s}
.clipbox b{font:800 12px/1.05 Archivo,sans-serif;letter-spacing:-.02em}.clipbox i{font:500 9px/1 var(--mono);color:var(--muted);font-style:normal;margin-bottom:auto}
.clipbox.on{opacity:1;transform:none}.clipbox.kept{box-shadow:0 0 0 2px var(--teal-d)}
.clipbox .keep{position:absolute;right:5px;top:4px;font:500 9px/1 var(--mono);color:var(--teal);opacity:0;transition:opacity .3s}
.clipbox.kept .keep{opacity:1}
.chip{position:absolute;top:2px;bottom:2px;border-radius:999px;background:var(--gr-3);border:1px solid var(--gr-line);color:var(--gr-text);
  font-size:11.5px;line-height:24px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .4s var(--ease),border-color .3s,background .3s}
.chip.on{opacity:1}.chip.edit{border-color:var(--blue-d);background:rgba(132,150,255,.14)}
.seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:2px}
.seg i{width:3px;border-radius:2px;background:var(--gr-muted);height:0;transition:height .25s var(--ease),background .3s}
.seg.on i{height:var(--h)}.seg.new i{background:var(--amber)}.seg.fresh i{background:var(--teal-d)}
.bubble{position:absolute;z-index:3;max-width:300px;background:var(--gr);border:1.5px solid var(--blue-d);border-radius:8px;padding:7px 11px;font-size:13.5px;line-height:1.3;color:var(--gr-text);white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.bubble .caret{background:var(--blue-d)}
.playhead{position:absolute;top:8px;bottom:8px;left:80px;width:2px;background:var(--blue-d);opacity:0;transition:opacity .3s;pointer-events:none}
.playhead::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--blue-d)}
.comp[data-phase="play"] .playhead,.comp[data-phase="edit"] .playhead{opacity:1}
.comp-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--gr-line);font:500 12.5px/1.3 var(--mono);color:var(--gr-muted)}
.comp-foot .state{color:var(--gr-text)}.comp-foot .note{margin-left:auto;text-align:right}
.comp[data-phase="done"] .comp-foot .state{color:var(--teal-d)}
.under{font:500 12px/1.5 var(--mono);color:var(--gr-muted);margin:12px 2px 0}

/* proof */
.proof{margin-top:76px;border-top:1px solid var(--gr-line)}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.proof .wrap>div{padding:30px 24px 34px 0}.proof .wrap>div+div{padding-left:24px;border-left:1px solid var(--gr-line)}
.proof b{display:block;font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:var(--track-title);line-height:1}
.proof span{display:block;margin-top:8px;color:var(--gr-muted);font-size:15.5px;max-width:28ch}

/* reading areas */
section{padding:104px 0}
h2{font-weight:800;font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:var(--track-title);margin:0 0 18px;max-width:18ch}
.intro{color:var(--muted);font-size:19px;max-width:56ch;margin:0 0 44px}
.dark .intro{color:var(--gr-muted)}

/* try it yourself */
.try{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.tl{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:18px}
.tl .lane{grid-template-columns:48px 1fr}.tl .lab{color:var(--muted)}
.tl .track{height:40px}.tl .lane.txt .track{height:34px}.tl .lane.snd .track{height:30px}
.tl .clipbox{opacity:1;transform:none;background:#fff;border:1px solid var(--line)}
.tl .chip{opacity:1;background:#fff;border-color:var(--line);color:var(--ink);cursor:pointer;font:inherit;font-size:12.5px;line-height:28px;top:1px;bottom:auto;height:30px;text-align:left}
.tl .chip:hover{border-color:var(--ink)}.tl .chip[aria-pressed="true"]{border-color:var(--blue);background:#e9ecff;color:var(--ink)}
.tl .chip.changed{border-color:var(--teal);background:#e3f1ec}
.tl .seg i{background:#9aa1a8}.tl .seg.new i{background:var(--amber)}.tl .seg.fresh i{background:var(--teal)}
.tl .clipbox.kept{box-shadow:0 0 0 2px var(--teal)}
.editor{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:10px}
.editor label{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.editor .row{display:flex;gap:10px;flex-wrap:wrap}
.editor input{flex:1;min-width:220px;font:inherit;font-size:17px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.editor input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.btn.blue{background:var(--blue);color:#fff}.btn.blue:hover{background:#2238e0}
.status{min-height:3.2em;font:500 13px/1.6 var(--mono);color:var(--muted)}
.status b{color:var(--teal);font-weight:500}
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:22px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:4px 14px}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:500 14px/1.9 var(--mono);color:var(--blue)}
.steps b{font-size:20px;letter-spacing:-.02em}.steps span{color:var(--muted);font-size:16.5px}

/* cases: carousel */
.cases-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.cases-head h2{margin:0}.cases-nav{margin-left:auto;display:flex;align-items:center;gap:10px}
.cases-nav .count{font:500 14px/1 var(--mono);color:var(--gr-muted);min-width:64px;text-align:center}
.round{width:48px;height:48px;border-radius:50%;border:1px solid var(--gr-line);background:transparent;color:var(--gr-text);font:600 20px/1 Archivo,sans-serif;cursor:pointer}
.round:hover{background:var(--gr-2)}.round:disabled{opacity:.35;cursor:default}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:24px}
.slides::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.slide .no{font:500 13px/1 var(--mono);color:var(--blue-d);margin:0 0 14px}
.slide h3{font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:var(--track-heading);line-height:1.05;margin:0 0 14px}
.slide p{color:var(--gr-muted);margin:0 0 18px}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 13px/1.6 var(--mono);color:var(--gr-text)}
.facts li::before{content:"· ";color:var(--teal-d)}
.frame{border:1px solid var(--gr-line);border-radius:12px;overflow:hidden;background:var(--gr-2)}
.frame .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--gr-line)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--gr-line)}
.frame img{width:100%;height:auto}
.compare{position:relative;aspect-ratio:10/9;border-radius:12px;overflow:hidden;border:1px solid var(--gr-line);user-select:none}
.compare .flip{position:absolute;inset:0;background:url(media/vorher_seq.jpg) 0 0/1600% 100% no-repeat;animation:flip 2.4s steps(16) infinite}
.compare .flip.after{background-image:url(media/nachher_seq.jpg);clip-path:inset(0 0 0 var(--cut,50%))}
/* 16 frames side by side: a position of p% moves the strip by p/100 x 15 frames, so 16 steps up to 16/15
   (106.667%) land exactly on frames 0..15 */
@keyframes flip{from{background-position:0 0}to{background-position:106.6667% 0}}
.slide.wide{grid-template-columns:1fr;gap:28px}.slide.wide>div:last-child{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 48px;align-items:start}
.slide.wide>div:last-child .no,.slide.wide>div:last-child h3{grid-column:1}.slide.wide>div:last-child p,.slide.wide>div:last-child .facts{grid-column:2}
.slide.wide>div:last-child h3{grid-row:2}.slide.wide>div:last-child p{grid-row:1/3;margin-top:22px}
.slide.wide>div:last-child .no{grid-row:1;margin:0 0 6px}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--gr-text);transform:translateX(-1px);pointer-events:none}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2315181B%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 7l-5 5 5 5M15 7l5 5-5 5%22/%3E%3C/svg%3E") center/22px no-repeat var(--gr-text)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare .tag{position:absolute;bottom:12px;font:500 12px/1 var(--mono);padding:6px 9px;border-radius:999px;background:rgba(15,17,19,.78);color:var(--gr-text)}
.compare .tag.l{left:12px}.compare .tag.r{right:12px}

/* modules: a list, not cards */
.modules{border-top:1px solid var(--line)}
.mod{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:22px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink)}
.mod h3{margin:0 0 4px;font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:var(--track-heading)}
.mod p{margin:0;color:var(--muted);font-size:16.5px;max-width:60ch}
.mod .side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.state-chip{font:500 12px/1 var(--mono);padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.state-chip.ok{border-color:transparent;background:#dcece6;color:var(--teal)}
.state-chip.draft{border-color:transparent;background:#3a2a10;color:#ffd9a8}
.mod .link{font-weight:700;font-size:15px;color:var(--blue);text-decoration:none}
.mod:hover h3{color:var(--blue)}
.glyph{width:72px;height:56px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center}
.glyph svg{width:52px;height:40px;overflow:visible}
.glyph .s{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.glyph .f{fill:var(--ink)}.glyph .b{fill:var(--blue)}.glyph .a{stroke:var(--blue)}
.glyph .g1,.glyph .g2,.glyph .g3{transition:transform .5s var(--ease),opacity .5s var(--ease)}
.mod:hover .glyph .g1{transform:translateX(-4px)}.mod:hover .glyph .g3{transform:translateX(4px)}
.mod:hover .glyph .grow{transform:scaleY(1.35)}.glyph .grow{transform-origin:bottom;transform-box:fill-box;transition:transform .5s var(--ease)}
.mod:hover .glyph .draw{stroke-dashoffset:0}.glyph .draw{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .8s var(--ease)}
.mod.soon .glyph{opacity:.75}
.sub{font:500 13px/1 var(--mono);color:var(--muted);letter-spacing:.04em;margin:56px 0 0;padding-bottom:12px}

/* two thoughts, no boxes */
.thoughts{display:grid;grid-template-columns:1fr 1fr;gap:56px;border-top:1px solid var(--line);padding-top:40px}
.thoughts h3{font-weight:800;font-size:26px;letter-spacing:var(--track-heading);margin:0 0 10px;line-height:1.15}
.thoughts p{color:var(--muted);margin:0}

/* faq */
.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:20px;padding:20px 44px 20px 0;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font:400 28px/1 Archivo,sans-serif;color:var(--muted);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}.faq details p{margin:0 0 22px;color:var(--muted);max-width:66ch}

/* contact */
.person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;max-width:1000px}
.portrait{width:220px;height:220px;border-radius:50%;overflow:hidden;border:1px solid var(--gr-line);background:var(--gr-2);display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .initials{font-weight:800;font-size:64px;letter-spacing:var(--track-display);color:var(--gr-text)}
.person .who{font:500 13px/1.5 var(--mono);color:var(--blue-d);margin:0 0 14px}
.person .quote{font-size:21px;line-height:1.45;color:var(--gr-text);margin:0 0 24px;max-width:40ch}
.person .bg{color:var(--gr-muted);margin:-8px 0 24px;max-width:52ch;font-size:16.5px;border-left:2px solid var(--teal-d);padding-left:14px}
.next{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:8px;color:var(--gr-muted);counter-reset:n}
.next li{counter-increment:n;display:grid;grid-template-columns:36px 1fr}
.next li::before{content:counter(n,decimal-leading-zero);font:500 13px/1.85 var(--mono);color:var(--teal-d)}
.mail{margin-top:16px;font:500 14px/1.5 var(--mono);color:var(--gr-muted)}

footer{background:var(--gr);color:var(--gr-muted);border-top:1px solid var(--gr-line);padding:28px 0 40px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center}footer nav a{font-weight:500}

/* reveal when scrolled into view (only with JS, never hides content without it) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* brand hub page */
.brand-top{padding-top:72px;padding-bottom:72px;max-width:var(--wide)}.brand-top .intro{max-width:60ch}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.logo-ground{border:1px solid var(--gr-line);border-radius:12px;padding:40px;display:grid;place-items:center;background:var(--gr)}
.logo-ground.light{background:var(--paper)}.logo-ground img{max-width:100%;height:auto}
.wordmark{display:inline-flex;align-items:center;gap:18px;font:800 clamp(26px,3.4vw,42px)/1 Archivo,system-ui,sans-serif;letter-spacing:-.02em;color:#F4F5F1}.wordmark.ink{color:#15181B}.wordmark img{width:clamp(40px,5.5vw,56px);height:auto}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.swatches.on-dark{background:var(--gr);padding:18px;border-radius:12px}
.sw{display:grid;gap:4px}.sw i{display:block;height:84px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.sw b{font-size:15px}.sw span{font-size:13px;color:var(--muted)}.on-dark .sw b{color:var(--gr-text)}.on-dark .sw span{color:var(--gr-muted)}
.on-dark .sw i{border-color:rgba(255,255,255,.08)}
.specimens{display:grid;grid-template-columns:1fr 1fr;gap:56px;border-top:1px solid var(--line);padding-top:40px}
.spec-display{font-weight:800;font-size:clamp(44px,5.4vw,76px);letter-spacing:var(--track-display);line-height:.98;margin:0}
.spec-body{font-size:22px;line-height:1.5;margin:0 0 28px;max-width:34ch}.spec-mono{font:500 22px/1.4 var(--mono);margin:0}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:20px}.examples figure{margin:0}
.examples img{width:100%;height:auto;border-radius:10px;border:1px solid var(--gr-line)}
.examples figcaption{font-size:12.5px;color:var(--gr-muted);margin-top:8px}

/* about page */
.about-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;padding-top:80px;padding-bottom:84px}
.portrait.big{width:280px;height:280px}
.about-hero h1{font-weight:800;font-size:clamp(40px,5.4vw,72px);letter-spacing:var(--track-display);line-height:1;margin:0 0 12px}
.about-hero .who{font:500 13px/1.5 var(--mono);color:var(--blue-d);margin:0 0 26px}
.motivation{font-size:clamp(20px,2vw,25px);line-height:1.45;color:var(--gr-text);max-width:42ch;margin:0 0 16px}
.approach{font-size:19px;color:var(--gr-text);border-left:2px solid var(--teal-d);padding-left:16px;max-width:46ch;margin:0 0 30px}
.about-body{max-width:920px}.about-body h2{font-size:clamp(26px,3vw,36px);margin:48px 0 18px}.about-body h2:first-child{margin-top:0}
.about-body ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.about-body li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.about-body li strong{display:block;color:var(--ink);font-size:19px;margin-bottom:2px}
.about-body p{color:var(--muted)}

/* module and legal pages */
.page{padding-top:64px;padding-bottom:96px;max-width:800px}
.page h1{font-weight:800;font-size:clamp(38px,5.2vw,64px);letter-spacing:var(--track-display);line-height:1;margin:12px 0 16px}
.page h2{font-size:26px;margin:40px 0 10px;letter-spacing:-.025em;max-width:none}
.page p,.page li{max-width:68ch;overflow-wrap:break-word;hyphens:auto}
.page .intro{margin-bottom:28px}
.fact-list{display:grid;grid-template-columns:180px 1fr;gap:0;border-top:1px solid var(--line);margin:28px 0}
.fact-list dt,.fact-list dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0}
.mod-bild{margin:28px 0 8px}.mod-bild img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--paper-2)}
.mod-bild figcaption{font:500 12.5px/1.5 var(--mono);color:var(--muted);margin-top:10px;letter-spacing:.02em}
.fact-list dt{font:500 12.5px/1.8 var(--mono);color:var(--muted);letter-spacing:.04em}
.back{display:inline-block;margin-bottom:22px;text-decoration:none;font-weight:700}

@media (max-width:980px){.about-hero{grid-template-columns:1fr;gap:28px;padding-top:48px}.portrait.big{width:170px;height:170px}.hero-grid,.try,.slide{grid-template-columns:1fr;gap:36px}.slide.wide>div:last-child{display:block}.slide.wide>div:last-child p{margin-top:0}.thoughts{grid-template-columns:1fr;gap:28px}
  .person{grid-template-columns:1fr;gap:26px}.portrait{width:150px;height:150px}.portrait .initials{font-size:46px}}
@media (max-width:640px){.logos,.examples,.specimens{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr}body{font-size:17px}section{padding:72px 0}.hero{padding-top:48px}nav a.opt{display:none}
  .proof .wrap{grid-template-columns:1fr}.proof .wrap>div,.proof .wrap>div+div{padding:20px 0;border-left:0;border-top:1px solid var(--gr-line)}.proof .wrap>div:first-child{border-top:0}
  .clipbox .keep{display:none}
  .voice{grid-template-columns:40px 1fr}.voice .wave{display:none}.lane,.tl .lane{grid-template-columns:40px 1fr;gap:8px}
  .mod{grid-template-columns:56px minmax(0,1fr);gap:16px}.mod .side{grid-column:2;align-items:center;text-align:left;flex-direction:row;flex-wrap:wrap;gap:8px 14px}
  .glyph{width:56px;height:46px}.glyph svg{width:40px;height:32px}.fact-list{grid-template-columns:1fr}.fact-list dt{border-bottom:0;padding-bottom:0}
  .cases-nav{margin-left:0}}
@media (max-width:640px){header.site .wrap{gap:10px}nav a.go{white-space:nowrap;margin-left:4px}.langs{margin-left:0}.langs a,.langs .cur{padding:8px 5px}}
@media (max-width:430px){nav a.opt2{display:none}nav a:not(.go){display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}.compare .flip{background-position:40% 0}}

/* talk to us: the contact form as a dialog (seite.js, part 6) */
.k-dialog{border:0;padding:0;border-radius:14px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.k-dialog::backdrop{background:rgba(15,17,19,.72)}
.k-form{padding:28px 28px 24px;display:grid;gap:14px}
.k-form h2{font-size:30px;margin:0;max-width:none}.k-lead{margin:0;color:var(--muted)}
.k-field{display:grid;gap:6px;font-weight:600;font-size:15px}
.k-field input,.k-field textarea{font:400 17px/1.4 inherit;font-family:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.k-field textarea{resize:vertical;min-height:120px}
.k-field input:focus,.k-field textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.k-consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:15px;color:var(--muted)}
.k-consent input{width:20px;height:20px;margin:2px 0 0}
.k-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.k-status{margin:0;min-height:1.4em;font-size:15px;color:var(--ink)}
.k-form .actions{display:flex;gap:10px;flex-wrap:wrap}.k-form .btn.quiet{color:var(--ink);border-color:var(--line)}
.try .status .btn.small{min-height:36px;padding:0 14px;font-size:15px;margin-left:8px;vertical-align:middle}
@media (max-width:640px){.k-form{padding:22px 18px 18px}.k-form h2{font-size:26px}}
.tl .chip.playing{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}.tl .seg.playing i{background:var(--blue);height:var(--h)}