@font-face {
  font-family:Manrope;
  src:url(assets/manrope-regular.woff2) format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Manrope;
  src:url(assets/manrope-semibold.woff2) format("woff2");
  font-weight:500 700;
  font-display:swap;
}
@font-face {
  font-family:Manrope;
  src:url(assets/manrope-extrabold.woff2) format("woff2");
  font-weight:800;
  font-display:swap;
}

html {
  --font-1:Manrope,Arial,sans-serif;
  --font-2:Georgia,'Times New Roman',serif;
  --line-height:1.5;
  --radius:.25rem;
  --width:79rem;
  --gap:1rem;
  --control-padding-x:.9rem;
  --control-padding-y:.75rem;
  font-size:clamp(1rem,calc(.8rem + .25vw),1.2rem);
  font-synthesis:none;
  scroll-padding-block-start:2rem;
}
[u2-skin] { --lime:#d9f477; --accent:var(--color); }
[u2-skin=light] {
  --color:#a70b2b;
  --color-bg:#f3f1eb;
  --color-text:#242521;
  --color-area:#e9e8e1;
  --color-line:color-mix(in srgb,var(--color-text),transparent 78%);
}
[u2-skin=dark] { --color:#cadbb1; --color-bg:#242a25; --color-text:#f3f1eb; --color-line:#6b7564; }

body { overflow-x:clip; }
h1,h2,h3,h4 { font-weight:500; letter-spacing:-.055em; --line-height:1.05; }
h1 { font-size:clamp(3.5rem,6.8vw,6.6rem); margin:0; hyphens:none; }
h2 { font-size:clamp(2.5rem,4.5vw,4.5rem); margin:0; hyphens:none; }
h3 { font-size:clamp(1.5rem,2.3vw,2.2rem); }
em { font-family:var(--font-2); font-weight:400; letter-spacing:-.065em; }
p { --line-height:1.65; hyphens:none; }
a { text-underline-offset:.2em; }
:focus-visible { outline:.15rem solid var(--accent); outline-offset:.25rem; }
main:focus { outline:none; }
.section { padding-block:clamp(3.5rem,6.8vw,6.5rem); }
.eyebrow { display:block; font-size:.73rem; letter-spacing:.1em; font-weight:600; text-transform:uppercase; }
.lead { font-size:clamp(1rem,1.5vw,1.2rem); max-inline-size:43rem; color:var(--gray-dark); }
u2-ico.brand-arrow { --size:1.4rem; flex:none; }
u2-ico.brand-arrow.-down { rotate:90deg; }
.btn:not([hidden]) {
  display:inline-flex; align-items:center; justify-content:space-between; gap:2rem;
  font-size:.86rem; font-weight:600; margin-block-start:1.4rem;
  padding-inline:1.25rem;
}
.btn:not(:disabled):hover { translate:0 -.1rem; }
.text-link { display:inline-flex; flex-wrap:wrap; max-inline-size:100%; align-items:center; gap:.5rem 1.3rem; min-block-size:2.75rem; font-size:.86rem; font-weight:600; color:inherit; }
.text-link:is(:hover,:focus-visible),.offer-links a:is(:hover,:focus-visible) { color:var(--color); }
.text-link u2-ico,.offer-links u2-ico { transition:translate .2s; }
.text-link:is(:hover,:focus-visible) u2-ico,.offer-links a:is(:hover,:focus-visible) u2-ico { translate:.15rem -.15rem; }
.skip { position:fixed; inset:1rem auto auto 1rem; translate:0 -200%; padding:1rem; background:var(--color-text); color:var(--color-bg); z-index:20; }
.skip:focus { translate:0; }

.site-header>.u2-width { overflow:visible; min-block-size:6.5rem; align-items:center; flex-wrap:nowrap; --u2-Gap:2rem; border-block-end:1px solid var(--color-line); }
.brand { flex:none; }
.brand img,.footer-brand img { inline-size:11.5rem; max-inline-size:100%; display:block; }
#site-nav { all:unset; display:block; }
.site-header nav { position:relative; isolation:isolate; flex-wrap:nowrap; align-items:center; --u2-Gap:1.65rem; }
.site-header nav a { position:relative; color:inherit; font-size:.8rem; white-space:nowrap; padding:1rem .5rem; }
.site-header nav a:is([aria-current=page],:hover) { color:var(--color); }
.contact-link { display:inline-flex; min-block-size:2.75rem; align-items:center; gap:.8rem; flex:none; font-size:.83rem; color:inherit; text-decoration:none; }
.contact-link u2-ico { --size:1.5rem; color:var(--color); transition:rotate .2s; }
.contact-link:is(:hover,:focus-visible) u2-ico { rotate:10deg; }
.contact-link[aria-current=page] { color:var(--color); text-decoration:underline; }
.site-header .nav-toggle.u2-unstyle,.site-header .nav-close.u2-unstyle,.mobile-contact { display:none; }
.site-header :is(.nav-toggle,.nav-close) { min-block-size:2.75rem; }

/* Layout and interactions build on the locally served u2 modules. */

.section-heading,.workbench-intro { align-items:end; --u2-Gap:2rem; }
.section-heading { margin-block-end:2.8rem; }
.section-heading h2 { margin-block-start:1.1rem; }
.section-heading>p,.workbench-intro>p { color:var(--gray-dark); }
.section-heading>p { max-inline-size:26rem; }
.home-work,[qcms-name=ueber-mich-2-about-values],.site-footer { background:var(--color-area); }
:is(.projects,[qcms-mod="cont.items"][qcms-name=featured]) { --u2-Items-width:27rem; --u2-Gap:2rem; align-items:start; }
.project,.reference { color:inherit; text-decoration:none; min-inline-size:0; scroll-margin-block-start:2rem; }
.lascaux-visual>:is(img,cms-image),.life-visual>:is(img,cms-image),.photo-print,.flexims-screen,.reference-picture img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .project:is(:hover,:focus-visible) :is(.project-visual>:is(img,cms-image),.photo-print,.flexims-screen) { will-change:transform; }
}
.project-visual { position:relative; isolation:isolate; overflow:hidden; block-size:33rem; border-radius:var(--radius); }
.project-open { position:absolute; inset:auto 1.2rem 1.2rem auto; z-index:3; background:var(--color-bg); color:var(--color-text); border:1px solid var(--color-text); border-radius:.3rem; inline-size:3rem; aspect-ratio:1; display:grid; place-items:center; box-shadow:.18rem .2rem 0 var(--color-text); transition:translate .25s; }
.project:is(:hover,:focus-visible) .project-open { translate:-.15rem -.15rem; }
.project-caption { align-items:baseline; margin-block-start:1.2rem; }
.project-caption :is(h2,h3) { font-size:1.5rem; --line-height:1.2; }
.project-caption>span { font-size:.75rem; color:var(--gray-dark); display:inline-flex; align-items:center; gap:.5rem; }
.project-caption u2-ico { --size:1rem; }
.project>p { font-size:.9rem; color:var(--gray-dark); margin-block:.5rem 0; }
.project:is(:hover,:focus-visible) .project-caption :is(h2,h3) { color:var(--color); }
.project-kicker { position:absolute; inset:1.5rem auto auto 1.5rem; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.lascaux-visual { background:#dad5c2; }
.lascaux-word { position:absolute; inset:4rem 1.4rem auto; font-size:clamp(4rem,7vw,7rem); font-weight:800; letter-spacing:-.075em; color:#fffaf2; --line-height:1; }
.lascaux-word u2-textfit { font-size:clamp(2rem,var(--js-font-size,3rem),7rem); }
.lascaux-visual>:is(img,cms-image) { position:absolute; inline-size:76%; block-size:75%; object-fit:contain; inset:auto auto 2rem 12%; filter:drop-shadow(.5rem 1rem .8rem #25251520); }
.project:is(:hover,:focus-visible) .lascaux-visual>:is(img,cms-image) { transform:translateY(-.4rem) rotate(-2deg); }
.visual-caption { position:absolute; inset:auto auto 1.5rem 1.5rem; font-size:.68rem; z-index:2; }
.life-visual { background:#234846; container-type:inline-size; }
.life-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(#082d2ac7,#082d2a99 28%,#082d2a30 55%,#082d2ae8); }
.life-visual>:is(img,cms-image) { inline-size:100%; block-size:100%; object-position:60% 50%; }
.project:is(:hover,:focus-visible) .life-visual>:is(img,cms-image) { transform:scale(1.03); }
.life-word { position:absolute; inset:2rem 1.6rem auto; z-index:2; color:white; font-size:min(3.4rem,18cqi); font-weight:600; letter-spacing:-.075em; --line-height:1; }
.life-word>span { display:block; font-size:.73rem; letter-spacing:0; font-weight:400; margin-block-start:.75rem; }
.life-visual .visual-caption { color:white; }
.foto-visual { background:#d9e0e5; }
.foto-word { position:absolute; inset:1.5rem auto auto 1.5rem; font-size:1.4rem; font-weight:800; letter-spacing:-.07em; }
.foto-word>span { font-weight:400; color:#445b6d; }
.foto-title { position:absolute; inset:5.8rem 1.5rem auto; font-size:2.5rem; font-weight:500; --line-height:1.1; letter-spacing:-.055em; z-index:2; }
.photo-print { position:absolute; inset:12rem 12% -3rem 18%; background:#fdfbf7; box-shadow:0 1rem 2rem #2e405a22; transform:rotate(8deg); padding:.8rem .8rem 0; }
.photo-print>:is(img,cms-image) { inline-size:100%; block-size:80%; object-position:57%; }
.photo-print>span { font-size:.65rem; display:block; text-align:center; margin-block-start:.7rem; }
.project:is(:hover,:focus-visible) .photo-print { transform:rotate(4deg); }
.foto-visual .visual-caption { display:none; }
.page-work .project-foto { grid-column:1 / -1; }
.page-work .foto-visual { block-size:30rem; }
.page-work .foto-title { inset-block-start:8rem; inline-size:48%; font-size:clamp(2.5rem,4vw,4rem); }
.page-work .photo-print { inset:2rem 7% -2rem 56%; }
.project-flexims { grid-column:1 / -1; }
.flexims-visual { display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:3rem; padding:2.5rem; background:#24443c; color:#f3f1eb; block-size:30rem; }
.flexims-copy { min-inline-size:0; }
.flexims-copy>:is(img,cms-image) { inline-size:10rem; display:block; }
.flexims-copy>p { font-size:clamp(2.5rem,4vw,4.2rem); letter-spacing:-.055em; --line-height:1.05; margin-block:2rem 1.2rem; }
.flexims-copy em { color:#d8edaa; }
.flexims-copy>span { font-size:.75rem; }
.flexims-screen { max-inline-size:32rem; justify-self:center; border:.5rem solid #f3f1eb; background:#f3f1eb; transform:rotate(-2deg); box-shadow:.4rem .5rem 0 #0005; min-inline-size:0; }
.flexims-screen>:is(img,cms-image) { display:block; inline-size:100%; }
.project:is(:hover,:focus-visible) .flexims-screen { transform:rotate(0deg); }
.portfolio-note { font-size:.8rem; color:var(--gray-dark); margin-block:2rem 0; }
[qcms-name=arbeiten-1-page-intro] { padding-block-end:3.5rem; }
[qcms-name=arbeiten-1-page-intro] h1 { margin-block:1.3rem 1.7rem; }
.offer-links { --u2-Items-width:calc((100% - 4.5rem) / 4); --u2-Gap:0; --u2-Col-gap:1.5rem; border-block-start:1px solid var(--color-line); margin-block-start:3rem; }
.offer-links a { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-block-size:4.5rem; padding-block:1.2rem; border-block-end:1px solid var(--color-line); color:inherit; text-decoration:none; font-size:1rem; }
.offer-links u2-ico { color:var(--color); }

.reference-intro { margin-block:5rem 2rem; border-block-start:1px solid var(--color-line); padding-block-start:3rem; }
.reference-intro h2 { font-size:clamp(2rem,3.5vw,3.3rem); margin-block-start:.8rem; }
[qcms-mod="cont.items"][qcms-name=references] { --u2-Items-width:17rem; --u2-Gap:2.5rem; --u2-Col-gap:1.8rem; }
.reference-picture { aspect-ratio:1.5; background:#e0ded5; position:relative; overflow:hidden; border-radius:var(--radius); margin:0 0 1rem; }
.reference-picture img { display:block; inline-size:100%; block-size:100%; transform:translate3d(0,0,0) scale(1.035); }
.reference-picture.-logo { display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center; padding:2.5rem; }
.reference-picture.-logo img { min-block-size:0; object-fit:contain; }
.reference-picture.-hundehalle { background:#e5dcc3; }
.reference-picture.-polarity { background:#d7e3df; }
.reference-picture.-engler { background:#fff; }
.reference-picture.-osteo { background:#e1eeeb; }
.reference-title { align-items:center; flex-wrap:nowrap; }
.reference-title h3 { font-size:1.3rem; letter-spacing:-.035em; }
.reference>p { font-size:.8rem; color:var(--gray-dark); margin-block:.4rem 0; }
.reference:is(:hover,:focus-visible) .reference-picture img { transform:translate3d(0,-1%,0) scale(1.035); }
.reference:is(:hover,:focus-visible) h3 { color:var(--color); }

.workbench-intro { margin-block-end:3rem; }
.workbench-intro h1 { margin-block-start:1.2rem; }
.workbench { container-type:inline-size; border:1px solid var(--color-text); background:var(--color-area); box-shadow:.4rem .45rem 0 var(--color-text); overflow:clip; }
.bench-choices { --u2-Items-width:calc((100% - 1.5rem) / 4); --u2-Gap:.5rem; margin:0; padding:1rem; border:0; border-radius:0; }
.bench-choices legend { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
.bench-choices label.btn { --color:#242521; --color-dark:var(--lime); --color-line:#686a60; --color-bg:#f3f1eb; inline-size:auto; min-block-size:2.75rem; font-size:.8rem; font-weight:500; letter-spacing:-.015em; justify-content:center; text-align:center; gap:.5rem; translate:none; margin:0; padding:var(--control-padding-y) .5rem; border:1px solid #686a60; }
.bench-choices label.btn:has(:checked) { color:#242521; }
.bench-choices label.btn:hover { border-color:var(--lime); color:#242521; }
.workbench:has(#ki:not(:checked))>.bench-ai,
.workbench:has(#webapplikationen:not(:checked))>.bench-app,
.workbench:has(#webseiten:not(:checked))>.bench-web,
.workbench:has(#cms:not(:checked))>.bench-cms { display:none; }
.bench-panel { --u2-Items-width:max(22rem,50%); --u2-Gap:0; min-block-size:37rem; background:var(--color-area); overflow:hidden; }
.bench-copy { padding:3rem; position:relative; z-index:2; min-inline-size:0; overflow-wrap:anywhere; }
.bench-category { font-size:.73rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.bench-copy h2 { font-size:clamp(2.7rem,4.1vw,4.3rem); --line-height:1.02; margin-block:1.4rem; }
.bench-copy h2 em { color:var(--color); }
.bench-copy>p { color:var(--gray-dark); max-inline-size:27rem; }
.bench-copy .text-link { margin-block-start:.7rem; }
.bench-scene { position:relative; min-inline-size:0; align-items:center; justify-content:center; padding:3rem 2.5rem 4rem; isolation:isolate; }
.scene-caption { position:absolute; inset:auto 1.5rem 1.2rem; text-align:center; font-size:.7rem; color:#535b44; --line-height:1.4; }
.ai-scene { background:var(--lime); --u2-Gap:2rem; }
.paper-note,.task-note { inline-size:min(100%,21rem); box-shadow:.4rem .55rem 0 #2425211c; border:1px solid var(--color-text); position:relative; }
.paper-note { background:#fbfaf4; padding:1.4rem; rotate:-5deg; margin-inline-start:-1rem; }
.paper-note>span { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.paper-note>p { font-family:var(--font-2); font-size:1.4rem; --line-height:1.35; margin-block:1rem; }
.paper-note>small { font-size:.65rem; color:var(--gray-dark); }
.task-note { rotate:4deg; padding:1.2rem; margin-inline-start:1.2rem; }
.task-note>span { font-size:1.3rem; font-weight:500; letter-spacing:-.04em; display:block; margin-block-end:.8rem; }
.task-note>p { font-size:.75rem; border-block-start:1px solid #676b5e; padding-block:.5rem; margin:0; }
.task-note b { color:var(--lime); font-weight:400; margin-inline-end:.4rem; }
.task-note>small { display:block; font-size:.65rem; color:#c9d3bc; margin-block-start:.8rem; }
.scene-connector { position:absolute; inset:43% .7rem auto auto; z-index:3; color:var(--color); rotate:70deg; }
.scene-connector u2-ico { --size:3rem; }
.bench-ai .paper-note,.bench-ai .task-note { transition:rotate .3s; }
.bench-ai:hover .paper-note { rotate:-3deg; }
.bench-ai:hover .task-note { rotate:2deg; }
.app-scene { background:color-mix(in srgb,var(--lime),var(--color-bg) 76%); --u2-Gap:2.5rem; }
.sheet-chaos { --u2-Gap:0; align-items:center; inline-size:100%; }
.sheet-chaos>span { padding:.7rem 1.2rem; border:1px solid #273d3f; background:#eef4e6; box-shadow:.15rem .2rem 0 #273d3f22; font-size:.85rem; rotate:-7deg; margin-block-start:-.2rem; }
.sheet-chaos>span:nth-child(2) { rotate:5deg; translate:1rem; }
.sheet-chaos>span:nth-child(3) { rotate:-3deg; translate:-.5rem; text-decoration:line-through; color:#656a64; }
.app-window { background:#fbfbf2; border:1px solid var(--color-text); box-shadow:.4rem .5rem 0 var(--color-text); inline-size:100%; max-inline-size:24rem; rotate:2deg; }
.app-window>div:first-child { padding:1.1rem; border-block-end:1px solid var(--color-text); --u2-Gap:.5rem; align-items:center; }
.app-window strong { font-size:1rem; letter-spacing:-.025em; }
.app-window>div:first-child>span { font-size:.65rem; color:#4f7033; }
.app-row { flex-wrap:nowrap; padding:1rem; --u2-Gap:.5rem; border-block-end:1px solid #d3d6cc; font-size:.8rem; }
.app-row>b { font-weight:500; color:#456236; }
.web-scene { background:color-mix(in srgb,var(--color),var(--color-bg) 86%); padding:3rem; }
.mini-site { inline-size:100%; background:var(--color); color:#fbf4e8; padding:1.5rem; min-block-size:28rem; rotate:4deg; box-shadow:.4rem .5rem 0 #55263d; position:relative; overflow:hidden; }
.mini-nav { align-items:center; border-block-end:1px solid #e1bccb; padding-block-end:.7rem; --u2-Gap:1rem; }
.mini-nav>b { font-size:2rem; letter-spacing:-.1em; }
.mini-nav>span { font-size:.7rem; }
.mini-site>p { font-size:.75rem; margin-block-start:2rem; }
.mini-site>strong { position:relative; font-weight:500; font-size:3.5rem; --line-height:.95; letter-spacing:-.06em; display:block; margin-block-start:.8rem; z-index:2; }
.mini-site>strong>em { color:var(--lime); }
.mini-flower { position:absolute; inset:auto -1.5rem .5rem auto; font-size:10rem; color:#c63756; --line-height:1; rotate:-10deg; }
.mini-site-bottom { position:absolute; inset:auto auto 1.5rem 1.5rem; font-size:.7rem; z-index:2; }
.cms-scene { background:color-mix(in srgb,var(--lime),var(--color-area) 85%); --u2-Gap:3rem; }
.cms-sticky { background:#fff2ab; font-size:1rem; padding:1.5rem; rotate:-8deg; box-shadow:.3rem .5rem 0 #71583322; align-self:start; text-decoration:line-through; text-decoration-color:#a70b2b80; }
.cms-direct { background:var(--color-bg); border:1px solid var(--color-text); padding:1.5rem; rotate:3deg; box-shadow:.3rem .4rem 0 var(--color-text); inline-size:100%; max-inline-size:24rem; }
.cms-direct>span { font-size:.7rem; }
.cms-direct>p { font-size:2rem; --line-height:1.3; letter-spacing:-.04em; margin-block:1.5rem; }
.cms-direct mark { background:var(--lime); color:var(--color-text); border-block-end:2px solid var(--color); padding:0 .1em; }
.cms-direct>b { font-size:.75rem; font-weight:500; color:var(--color); }
.cms-strike { position:absolute; inset:40% 1.5rem auto auto; color:var(--color); rotate:90deg; }
.cms-strike u2-ico { --size:3rem; }
.bench-footnote { --u2-Gap:1.5rem; font-size:.75rem; margin-block:1.8rem 0; color:var(--gray-dark); }
.bench-footnote>span { color:var(--color-text); }
.steps { --u2-Items-width:10rem; --u2-Gap:1.5rem; border-block-start:1px solid var(--color-line); margin-block-start:2.5rem; padding-block-start:1.5rem; }
.steps span { font-size:.8rem; font-weight:600; }
.steps p { font-size:.85rem; color:var(--gray-dark); margin-block:.7rem 0; }
.faq h2 { margin-block-start:1.1rem; }
.faq details { --color-line:color-mix(in srgb,var(--color-text),transparent 75%); }
.faq summary { position:relative; padding-block:1.2rem; padding-inline-end:2rem; font-size:1rem; font-weight:500; --line-height:1.4; line-height:var(--line-height); }
.faq summary::after { content:''; position:absolute; inset:1.25rem 0 auto auto; float:none; inline-size:1.15rem; block-size:1.15rem; background:currentColor; mask:url(assets/brand-arrow.svg) center / contain no-repeat; transform:none; }
.faq details[open]>summary::after { transform:rotate(90deg); }
.faq summary:is(:hover,:focus-visible) { color:var(--color); }
.faq details p { max-inline-size:39rem; color:var(--gray-dark); padding-inline-end:1.5rem; }

.qino-layout { --u2-Items-width:29rem; }
@media(width>=70rem) { .qino-layout { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.qino-layout,.assistant-layout,.about-layout { --u2-Gap:clamp(3rem,5vw,5rem); }
.assistant-layout,.about-layout { --u2-Items-width:28rem; }
.qino-layout,.assistant-layout,.about-layout { align-items:center; }
.qino :is(.eyebrow,h1 em) { color:var(--color); }
.qino h1 { margin-block:1.3rem 1.8rem; }
.qino-copy>p { max-inline-size:30rem; font-size:1rem; color:var(--gray-light); }
.qino-features { --u2-Gap:.7rem; --u2-Col-gap:1.2rem; margin-block:1.8rem .3rem; }
.qino-features span { font-size:.75rem; }
.qino-features span::before { content:'✓'; margin-inline-end:.4rem; color:var(--color); }
.qino-button { --color:var(--lime); --color-dark:color-mix(in srgb,var(--color),#000 12%); }
.qino-actions { --u2-Gap:.5rem; --u2-Col-gap:1.5rem; align-items:center; margin-block-start:1.4rem; }
.qino-actions>.btn { margin-block-start:0; }
.qino-actions>.text-link { color:inherit; font-size:.8rem; }
.qino-actions>.text-link:is(:hover,:focus-visible) { color:var(--color); }
.qino-demo { rotate:-1.5deg; position:relative; box-shadow:0 1.5rem 4rem #0003; scroll-margin-block-start:2rem; }
.demo-toolbar { overflow:visible; position:relative; align-items:center; flex-wrap:nowrap; --u2-Gap:.5rem; padding:.8rem 1rem; border-block-end:1px solid #deded6; border-radius:.5rem .5rem 0 0; }
.demo-brand img { inline-size:5rem; display:block; }
.demo-status { font-size:.65rem; color:#606457; }
.demo-toolbar button { --color:var(--color-text); display:inline-flex; align-items:center; gap:.4rem; padding-inline:var(--control-padding-x); --control-padding-x:.5rem; --color-dark:color-mix(in srgb,var(--color),#000 15%); font-size:.7rem; }
.demo-toolbar button[aria-pressed=true] { --color:var(--accent); }
.demo-page { position:relative; padding:2.8rem 2rem 2rem; min-block-size:28rem; }
.demo-eyebrow { font-size:.65rem; letter-spacing:.1em; position:relative; z-index:2; }
.demo-page :is(h1,h2,h3,h4,h5,h6) { font-weight:400; }
.demo-page h2 { font-size:clamp(2.6rem,4vw,4.4rem); --line-height:1.05; position:relative; z-index:2; margin-block:2rem 1.3rem; overflow-wrap:anywhere; max-inline-size:100%; }
.demo-copy { position:relative; z-index:2; font-size:.9rem; max-inline-size:25rem; overflow-wrap:anywhere; }
.demo-copy>p { margin-block:.7rem; }
.demo-copy :is(ul,ol) { padding-inline-start:1.4em; }
.demo-page [contenteditable=true] { --u2-rte:true; --u2-rte-toolbar:block bold italic link bullets unstyle; --u2-rte-toolbar-unavailable:hide; outline:1px solid #ff32004d; outline-offset:.4rem; cursor:text; }
.demo-page [contenteditable=true]:hover { outline-color:#ff320080; }
.demo-page [contenteditable=true]:focus { outline:.125rem solid #ff3200cc; }
.demo-art { position:absolute; pointer-events:none; inline-size:12rem; block-size:12rem; inset:auto .5rem 1rem auto; rotate:15deg; color:#b3bb86; opacity:.3; }
.demo-art>svg { inline-size:100%; block-size:100%; fill:currentColor; }
.demo-help { --u2-Gap:.5rem; --u2-Col-gap:1rem; background:var(--color-area); color:var(--gray-dark); padding:.7rem 1rem; align-items:center; font-size:.7rem; border-radius:0 0 .5rem .5rem; }
.demo-help p { flex:1 1 12rem; }
.demo-help button { font:inherit; text-decoration:underline; text-underline-offset:.2em; min-block-size:2.75rem; }
.demo-help button:disabled { opacity:.45; }
.demo-caption { font-size:.7rem; color:#c5cebc; text-align:center; margin-block:1.1rem 0; }

.assistant-copy h2 { margin-block:1.1rem 1.8rem; }
.assistant-copy .lead { color:var(--color-text); margin-block-end:1.1rem; }
.assistant-copy>p:not(.lead) { max-inline-size:32rem; color:var(--gray-dark); }
.assistant-example { margin:0; background:var(--color-area); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:.35rem .4rem 0 var(--color-text); min-inline-size:0; }
.assistant-top { align-items:center; padding:1rem 1.5rem; border-block-end:1px solid var(--color-line); text-align:start; font-size:.8rem; font-weight:600; }
.assistant-top .example-label { font-size:.65rem; font-weight:400; color:var(--gray-dark); text-transform:uppercase; letter-spacing:.08em; }
.assistant-messages { padding:1.5rem; }
.assistant-messages>div { padding:1rem 1.2rem; border:1px solid var(--color-line); border-radius:.4rem; max-inline-size:90%; }
.assistant-messages>div>span { display:block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; margin-block-end:.4rem; }
.assistant-messages p { margin:0; font-size:.9rem; }
.assistant-request { align-self:end; background:var(--color-bg); }
.assistant-answer { align-self:start; background:var(--lime); }
.assistant-changes { --u2-Items-width:12rem; margin-inline:1.5rem; }
.assistant-changes>div { background:var(--color-bg); border:1px solid var(--color-line); padding:1rem; border-radius:var(--radius); }
.assistant-changes>div>span { display:block; border-block-end:1px solid var(--color-line); padding-block-end:.5rem; font-size:.7rem; }
.assistant-changes p { margin-block:1rem 0; font-size:.8rem; --line-height:1.9; }
.assistant-changes del { color:var(--gray-dark); }
.assistant-changes ins { background:var(--lime); text-decoration:none; padding:.1em .25em; }
.assistant-example .assistant-example-note { font-size:.7rem; margin:1rem 1.5rem 1.5rem; color:var(--gray-dark); }
.bench-copy .bench-note { font-size:.8rem; margin-block:1.3rem 0; }
.bench-note a { color:inherit; }

[qcms-name=ueber-mich-2-about-values] article { border-block-start:1px solid var(--color-line); padding-block-start:1.5rem; }
.reason-mark { display:block; color:var(--color); font-size:2rem; margin-block-end:1rem; }
.reason-mark u2-ico { --size:1.8rem; }
u2-ico.sketch-icon svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
u2-ico.brand-arrow.-back { rotate:180deg; margin-inline-start:.2rem; }
[qcms-name=ueber-mich-2-about-values] h3 { margin-block:0 1.2rem; }
[qcms-name=ueber-mich-2-about-values] p { color:var(--gray-dark); }

.contact-copy h1 { margin-block:1.2rem 2rem; }
.contact-copy .lead { max-inline-size:28rem; }
.contact-copy>p:last-of-type { color:var(--gray-dark); margin-block-start:1.5rem; }
.email-link { display:inline-flex; flex-wrap:wrap; max-inline-size:100%; overflow-wrap:anywhere; min-block-size:2.75rem; gap:1rem; align-items:center; font-size:clamp(1.2rem,2.5vw,2rem); letter-spacing:-.04em; }
.contact-sticker { margin:3rem 0 0 1rem; display:inline-block; background:var(--lime); border:1px solid var(--color-text); box-shadow:.3rem .35rem 0 var(--color-text); padding:1.2rem 2rem; rotate:-6deg; font-size:1.3rem; --line-height:1.2; }
.contact-sticker em { font-size:1.4em; }
.project-brief { border:1px solid var(--color-line); padding:2rem; background:var(--color-area); min-inline-size:0; }
.project-brief fieldset { border:0; padding:0; margin-block:0 1.7rem; }
.project-brief legend { padding:0; font-size:.9rem; margin-block-end:.75rem; }
.project-brief label { display:block; font-size:.9rem; }
.project-brief label>span,.project-brief legend>span { font-size:.75rem; color:var(--gray-dark); font-weight:400; }
.project-brief :is(input:not([type=checkbox]),textarea) { inline-size:100%; background:var(--color-bg); margin-block-start:.5rem; }
.project-brief textarea { min-block-size:10rem; }
.project-brief>button { flex-wrap:wrap; max-inline-size:100%; overflow-wrap:anywhere; }
.brief-note { font-size:.75rem; color:var(--gray-dark); margin-block:1rem 0; max-inline-size:35rem; }

.about-hero { padding-block-end:4rem; }
.about-copy h1 { margin-block:1.3rem 2rem; }
.about-copy>p:not(.lead) { color:var(--gray-dark); max-inline-size:35rem; }

[qcms-name=ueber-mich-2-about-values] .u2-grid { --u2-Items-width:20rem; --u2-Gap:3rem; }
.open-work-head { margin-block-end:1rem; }

.next-step { padding-block:4rem; border-block-start:1px solid var(--color-line); }
.next-step>.u2-width { align-items:center; --u2-Gap:2rem; flex-wrap:nowrap; }
.next-step>.u2-width>div { min-inline-size:0; }
.next-step h2 { margin-block-start:1rem; font-size:clamp(2.5rem,5.2vw,5.5rem); }
.next-step h2 em { color:var(--color); }
.mark-link { display:grid; place-items:center; flex:none; inline-size:clamp(5rem,10vw,10rem); aspect-ratio:1; border:1px solid var(--color-line); border-radius:1rem; background:#fff; color:var(--color); transition:background .2s,color .2s; }
.mark-link u2-ico { --size:clamp(3rem,6vw,6rem); }
.mark-link:is(:hover,:focus-visible) { background:var(--color); color:var(--color-bg); }
.site-footer { border-block-start:1px solid var(--color-line); }
.footer-main { --u2-Items-width:calc((100% - 6rem) / 4); --u2-Gap:2rem; padding-block:4rem; align-items:start; }
.footer-intro { grid-column:span 2; }
.footer-intro .footer-statement { font-size:clamp(1.8rem,2.5vw,2.4rem); --line-height:1.1; letter-spacing:-.045em; color:var(--color-text); margin-block:1.5rem 1.2rem; }
.footer-statement em { color:var(--color); }
.site-footer p { font-size:.85rem; color:var(--gray-dark); margin-block:0; }
.footer-title { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-block:.3rem 1.2rem; --line-height:1.4; }
.footer-pages ul { list-style:none; padding:0; margin:0; }
.footer-pages a { display:flex; align-items:center; min-block-size:2.75rem; font-size:.9rem; color:inherit; }
.footer-email { display:inline-flex; max-inline-size:100%; overflow-wrap:anywhere; align-items:center; min-block-size:2.75rem; font-size:clamp(1rem,1.5vw,1.25rem); font-weight:600; letter-spacing:-.025em; margin-block:.35rem 1.2rem; }
.footer-contact>p { margin-block-end:1.1rem; }
.footer-contact>a:last-child { display:inline-flex; align-items:center; gap:.5rem; min-block-size:2.75rem; font-size:.8rem; color:var(--color-text); text-decoration:none; }
.footer-contact u2-ico { --size:1rem; }
.site-footer a[aria-current=page] { color:var(--color); text-decoration:underline; text-underline-offset:.25em; }
.site-footer a:hover { color:var(--color); }
.footer-bottom { border-block-start:1px solid var(--color-line); padding-block:1rem; align-items:center; }
.footer-bottom small { font-size:.75rem; color:var(--gray-dark); }
.footer-bottom nav { --u2-Gap:1.5rem; }
.footer-bottom nav a { display:inline-flex; align-items:center; min-block-size:2.75rem; font-size:.75rem; color:var(--gray-dark); }
[qcms-name$="-legal-page"] { min-block-size:70vh; }
[qcms-name$="-legal-page"] h1 { margin-block-start:1.3rem; }

.qino-copy,.qino-demo,.assistant-copy,.assistant-example,.about-copy,.contact-copy,.project-brief { inline-size:100%; max-inline-size:38rem; justify-self:center; }

.about-photo { inline-size:calc(100% - 2rem); max-inline-size:38rem; justify-self:center; margin:0 1rem; rotate:3deg; position:relative; isolation:isolate; padding:1rem 1rem 1.3rem; }
.about-photo::before { content:""; position:absolute; inset:7% 0 0; z-index:-1; background:#fbf9f3; box-shadow:.4rem .6rem 0 #26282022; }
.about-photo>:is(img,cms-image) { inline-size:100%; aspect-ratio:4/5; display:block; background:linear-gradient(transparent 9%,#d8d4ce 9%); }
.about-photo figcaption { margin-block-start:1rem; font-size:.9rem; text-align:center; }
.about-photo figcaption em { font-size:1.35em; margin-inline-start:.4rem; }
.photo-mark { position:absolute; inset:auto -.8rem 3.5rem auto; inline-size:6rem; aspect-ratio:1; display:grid; place-items:center; background:var(--color); border-radius:.3rem; rotate:-9deg; }
.photo-mark::before { content:''; position:absolute; inset:.25rem; border:1px solid var(--color-bg); border-radius:.1rem; }
.photo-mark svg { inline-size:75%; block-size:75%; fill:var(--color-bg); }
.about-links { --u2-Col-gap:2rem; margin-block-start:1.5rem; }

@media(width<72rem) {
  .site-header nav { --u2-Gap:1.1rem; }
  .site-header>.u2-width { --u2-Gap:1.5rem; }
  .brand img,.footer-brand img { inline-size:10.5rem; }
  .project-visual { block-size:29rem; }
  .demo-page { padding-inline:1.5rem; }
  .bench-copy { padding:2.5rem 2rem; }
  .bench-scene { padding-inline:1.5rem; }
  .bench-panel { min-block-size:39rem; }
}
@supports selector(:popover-open) {
  .site-header .nav-toggle.u2-unstyle { align-items:center; gap:.5rem; color:var(--color-text); font-size:.85rem; }
  .site-header>u2-responsive:state(compact) .nav-toggle.u2-unstyle:not([hidden]) { display:inline-flex; }
  .site-header>u2-responsive:state(compact) .contact-link { margin-inline-start:auto; }
  .site-header>u2-responsive:state(compact) #site-nav:not(:popover-open) { display:none; }
  .site-header>u2-responsive:state(minimal) .contact-link { display:none; }
  .site-header>u2-responsive:state(minimal) .brand { flex-shrink:1; min-inline-size:0; }
  .site-header>u2-responsive:state(minimal) .nav-toggle { margin-inline-start:auto; flex-shrink:0; }
  #site-nav:popover-open { position:fixed; inset:.75rem .75rem auto; max-block-size:calc(100dvh - 1.5rem); box-sizing:border-box; padding:1.5rem; overflow:auto; border:1px solid var(--color-text); background:var(--color-bg); color:var(--color-text); box-shadow:.3rem .4rem 0 var(--color-text); }
  #site-nav:popover-open nav { display:flex; flex-direction:column; align-items:stretch; gap:0; margin-block-start:1rem; }
  #site-nav:popover-open nav a { padding-block:1rem; font-size:1.6rem; letter-spacing:-.04em; border-block-end:1px solid var(--color-line); }
  #site-nav:popover-open u2-spot { display:none; }
  #site-nav:popover-open .nav-close:not([hidden]) { display:flex; align-items:center; justify-content:space-between; inline-size:100%; font-size:.8rem; }
  #site-nav:popover-open .nav-close>span { font-size:1.5rem; }
  #site-nav:popover-open .mobile-contact { display:block; }
  @media(width<64rem) {
    .site-header .nav-toggle.u2-unstyle:not([hidden]) { display:inline-flex; }
    .site-header .contact-link { margin-inline-start:auto; }
    #site-nav:not(:popover-open) { display:none; }
  }
}
@media(width<58rem) {
  .offer-links { --u2-Items-width:calc((100% - 1.5rem) / 2); }
  .footer-main { --u2-Items-width:calc((100% - 2rem) / 2); }
  .footer-intro { grid-column:1 / -1; }
  :is(.projects,[qcms-mod="cont.items"][qcms-name=featured]) { --u2-Items-width:22rem; }
  .bench-copy h2 { font-size:3.2rem; }
  .mini-site>strong { font-size:3rem; }
  .app-window strong { font-size:.85rem; }
  .demo-page h2 { font-size:3.8rem; }
  .qino-copy>p { max-inline-size:42rem; }
  .qino-demo { inline-size:calc(100% - 1rem); margin-inline:auto; }

  .contact-sticker { margin-block-start:2rem; }

  .flexims-visual { gap:2rem; padding:2rem; }
  .flexims-copy>p { font-size:2.7rem; }
}
@media(width<45rem) {
  h1 { font-size:clamp(3.4rem,11vw,5rem); }
  h2 { font-size:clamp(2.5rem,8vw,3.5rem); }
  .section { padding-block:3.5rem; }
  .site-header>.u2-width { min-block-size:5.5rem; --u2-Gap:1rem; }
  .brand img,.footer-brand img { inline-size:9.5rem; }
  .site-header .contact-link { display:none; }
  .nav-toggle { margin-inline-start:auto; }
  .section-heading { display:block; margin-block-end:2rem; }
  .section-heading>.text-link,.section-heading>p { margin-block-start:1.3rem; }
  :is(.projects,[qcms-mod="cont.items"][qcms-name=featured]) { --u2-Items-width:100%; --u2-Gap:2.5rem; }
  .project-visual { block-size:30rem; }
  .page-work .project-foto { grid-column:auto; }
  .page-work .foto-visual { display:flex; flex-direction:column; gap:1.5rem; padding:1.5rem; block-size:auto; min-block-size:30rem; }
  .page-work .foto-word { position:static; }
  .page-work .foto-title { position:static; inline-size:auto; font-size:clamp(2rem,9vw,2.5rem); margin-block-start:1rem; }
  .page-work .photo-print { position:relative; inset:auto; inline-size:82%; align-self:center; margin-block-end:-4rem; }
  .page-work .photo-print>:is(img,cms-image) { block-size:auto; aspect-ratio:1; }
  .project-caption :is(h2,h3) { font-size:1.4rem; }
  .project-caption>span { font-size:.73rem; }
  .project-caption>span u2-ico { display:none; }
  .lascaux-word { font-size:5rem; }
  .offer-links a { font-size:.9rem; }
  .offer-links u2-ico { --size:1.2rem; }
  .reference-intro { margin-block-start:3rem; }
  [qcms-mod="cont.items"][qcms-name=references] { --u2-Items-width:15rem; --u2-Gap:2rem; --u2-Col-gap:1rem; }
  .reference-picture.-logo { padding:2rem; }
  .workbench-intro { display:block; margin-block-end:2rem; }
  .workbench-intro>p { margin-block-start:1.5rem; }
  .workbench { box-shadow:.25rem .3rem 0 var(--color-text); }
  .bench-panel { min-block-size:0; }
  .bench-copy { padding:2rem 1.5rem; }
  .bench-copy h2 { font-size:3.4rem; }
  .bench-category { font-size:.7rem; }
  .bench-scene { min-block-size:32rem; padding:2.5rem 1.5rem 4rem; }
  .scene-connector { inset-inline-end:.5rem; }
  .app-scene { --u2-Gap:2rem; }
  .web-scene { padding-inline:2rem; }
  .mini-site { max-inline-size:24rem; }
  .mini-site>strong { font-size:3.6rem; }
  .cms-strike { inset-inline-end:.8rem; }
  .cms-direct>p { font-size:1.8rem; }
  .bench-footnote { display:block; font-size:.73rem; }
  .bench-footnote>span { display:block; margin-block-start:.5rem; }
  .steps { --u2-Items-width:100%; }
  .steps>div { --u2-Items-width:7.5rem; --u2-Gap:1rem; }
  .steps p { margin:0; }
  .qino-demo { rotate:-.75deg; inline-size:calc(100% - .4rem); }
  .demo-toolbar { padding:.75rem; }
  .demo-status { font-size:.55rem; }
  .demo-toolbar button { font-size:.65rem; }
  .demo-page { min-block-size:25rem; padding:2rem 1.3rem; }
  .demo-page h2 { font-size:3.4rem; }
  .demo-copy { font-size:.85rem; }
  .demo-art { inline-size:10rem; block-size:10rem; }
  .email-link { font-size:1.5rem; }
  .contact-sticker { margin-inline-start:.5rem; padding:1rem 1.4rem; }
  .project-brief { padding:1.5rem; }
  .project-brief :is(input:not([type=checkbox]),textarea) { font-size:1rem; }
  .about-layout { --u2-Gap:1.5rem; }
  .next-step { padding-block:3rem; }
  .next-step>.u2-width { --u2-Gap:1.5rem; flex-wrap:wrap; }
  .next-step h2 { font-size:clamp(2rem,8.5vw,3.8rem); overflow-wrap:anywhere; }
  .next-step .eyebrow { font-size:.65rem; }
  .mark-link { inline-size:4rem; }
  .mark-link u2-ico { --size:2.6rem; }
  .footer-main { --u2-Items-width:100%; --u2-Gap:2rem; padding-block:3rem 2rem; }
  .footer-intro { grid-column:auto; }
  .footer-title { margin-block-end:.7rem; }
  .footer-pages ul { display:grid; grid-template-columns:1fr 1fr; gap:.25rem 1rem; }
  .footer-email { font-size:1.2rem; }
  .footer-bottom { align-items:start; --u2-Gap:.5rem; }
  .footer-bottom nav { inline-size:100%; }

  .about-photo { margin-block-start:1rem; }
  .photo-mark { inline-size:4.5rem; }

  .assistant-top { padding:1rem; }
  .assistant-messages { padding:1rem; }
  .assistant-messages>div { max-inline-size:95%; padding:1rem; }
  .assistant-changes { margin-inline:1rem; --u2-Gap:.75rem; --u2-Items-width:9rem; }
  .assistant-changes>div { padding:.75rem; }
  .assistant-changes p { font-size:.75rem; }
  .assistant-example .assistant-example-note { margin-inline:1rem; }

  .flexims-visual { grid-template-columns:1fr; block-size:auto; min-block-size:30rem; padding:2rem 1.5rem 4rem; gap:2rem; }
  .flexims-copy>p { font-size:2.6rem; margin-block:1.5rem 1rem; }
  .flexims-screen { margin-inline:.2rem; }
}

@media(width>=52rem) {
  .page-work :is(.projects,[qcms-mod="cont.items"][qcms-name=featured]) .project:nth-child(2) { margin-block-start:6rem; }
}

.site-header u2-spot { background:none; border-radius:0; color:var(--color); transition-duration:.24s; }
.site-header u2-spot::after { content:''; position:absolute; inset:auto .5rem .45rem; block-size:2px; background:currentColor; }
.demo-toolbar>* { flex-shrink:0; white-space:nowrap; }
.demo-toolbar:state(wrap) { flex-wrap:wrap; }
.demo-toolbar:state(compact) .demo-status { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
.mini-site u2-textfit { font-size:clamp(1rem,var(--js-font-size,2rem),5rem); }
@media(width<52rem) {
  .site-header u2-spot { display:none; }
  .bench-choices { --u2-Items-width:calc((100% - .5rem) / 2); }
}
@media(width<36rem) {
  .bench-choices { padding:.75rem; }
  .bench-choices label.btn { font-size:.85rem; padding:var(--control-padding-y) .4rem; }
}

@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
}

@media(width<24rem) {
  h1 { font-size:min(3.4rem,14vw); }
}

@media(width<23rem) {
  .offer-links { --u2-Items-width:100%; }

  .assistant-changes { --u2-Items-width:100%; }
}

@supports(font-size:1cqi) {
  .lascaux-word,.mini-site { container-type:inline-size; }
  .lascaux-word u2-textfit { font-size:clamp(2rem,var(--js-font-size,24cqi),7rem); }
  .mini-site u2-textfit { font-size:clamp(1rem,var(--js-font-size,24cqi),5rem); }
}

@container(width<18rem) {
  .life-visual .visual-caption { inset-inline-end:1.5rem; inset-block-end:5.5rem; }
  .bench-copy { padding:2rem 1rem; }
  .bench-copy h2 { font-size:2.3rem; }
  .bench-scene { padding-inline:1rem; }
  .paper-note,.task-note { margin-inline:0; padding:1rem; overflow-wrap:anywhere; }
}

@media(forced-colors:active) {
  .brand img,.footer-brand img,.reference-picture.-logo { forced-color-adjust:none; background:var(--color-bg); }
  .site-header nav a[aria-current=page] { text-decoration:underline; }
  .faq summary::after { forced-color-adjust:none; background:CanvasText; }
}