/* Native Qino content keeps the site's original composition. */
.site { min-block-size:100dvh; }
.brand cms-image,.footer-brand cms-image { inline-size:11.5rem; max-inline-size:100%; display:block; }
.reference-picture>cms-image { display:block; inline-size:100%; block-size:100%; }
.reference-picture.-logo cms-image img { object-fit:contain; }
.demo-brand cms-image { inline-size:5rem; display:block; }
.demo-brand cms-image img { inline-size:100%; }
#main>[qcms-mod="cont.flexible"],.projects>[qcms-mod="cont.flexible"] { display:contents; }
.site [qcms-mod="cont.section"] { display:flex; flex-direction:column; margin-block:0; padding-block:clamp(3.5rem,6.8vw,6.5rem); }
.site [qcms-mod="cont.section"]>[qcms-name=main] { display:contents; }
.site [qcms-mod="cont.section"]>:is(h1,h2) { margin-block:1.1rem 1.8rem; }
.site [qcms-name=eyebrow] { order:-1; }
.site [qcms-name=eyebrow] .eyebrow { margin:0; }
.site :is([qcms-name=arbeiten-2-work],[qcms-name=angebot-2-approach],[qcms-name=ueber-mich-2-about-values],[qcms-name=kontakt-2-contact-next]) { position:relative; isolation:isolate; background:none; }
.site :is([qcms-name=arbeiten-2-work],[qcms-name=angebot-2-approach],[qcms-name=ueber-mich-2-about-values],[qcms-name=kontakt-2-contact-next])::before { content:''; position:absolute; inset:0 calc(50% - 50vw); z-index:-1; background:var(--color-area); }
.site [qcms-name=arbeiten-2-work] { padding-block-start:3rem; }
[qcms-name=reference-intro] { margin-block:5rem 2rem; border-block-start:1px solid var(--color-line); padding-block-start:3rem; }
[qcms-name=reference-intro] h2 { font-size:clamp(2rem,3.5vw,3.3rem); margin-block-start:.8rem; }
.flexims-screen { inline-size:100%; }

.primary-nav { position:relative; isolation:isolate; flex-wrap:nowrap; }
.primary-nav nav,.primary-nav ul,.primary-nav li,.footer-pages nav { display:contents; }
.primary-nav ul { list-style:none; margin:0; padding:0; }
.site-header .primary-nav a { text-decoration:none; }
.footer-pages li:has(>a[href="/"]),.footer-pages li:has(>a[href="/kontakt"]) { display:none; }
.footer-bottom nav ul,.footer-bottom nav li { display:contents; }
.footer-bottom nav ul { list-style:none; margin:0; padding:0; }
.footer-bottom nav { display:flex; gap:var(--u2-Gap); }
@media(width>=64rem) { .primary-nav a[href="/kontakt"] { display:none; } }
.about-copy>[qcms-mod="cont.text"],.qino-copy>[qcms-mod="cont.text"],.assistant-copy>[qcms-mod="cont.text"] { display:contents; }
.about-copy>[qcms-mod="cont.text"]>p:not(.lead) { color:var(--gray-dark); max-inline-size:35rem; }
.about-photo>[qcms-mod="cont.image"] { inline-size:100%; }
.about-photo>[qcms-mod="cont.image"]>cms-image { inline-size:100%; aspect-ratio:4/5; display:block; background-image:linear-gradient(transparent 9%,#d8d4ce 9%) !important; }

[qcms-name=index-3-home-offer]>h2 { max-inline-size:56rem; }
[qcms-name=index-3-home-offer] [qcms-name=intro] .lead { max-inline-size:39rem; }
[qcms-name=index-3-home-offer] [qcms-name=action] { margin-block-start:1.4rem; }
[qcms-name=offer-links] { --u2-Items-width:calc((100% - 4.5rem) / 4); --u2-Gap:1.5rem; border-block-start:1px solid var(--color-line); margin-block-start:3rem; }
[qcms-name=offer-links] a { display:flex; justify-content:space-between; align-items:center; gap:.5rem; min-block-size:4.5rem; padding-block:1.2rem; border-block-end:1px solid var(--color-line); color:inherit; text-decoration:none; }
[qcms-mod="cont.text"] :is(.text-link,.btn,.email-link)::after,[qcms-name=offer-links] a::after,[qcms-name=open-source-projects] a::after { content:''; flex:none; inline-size:1.4rem; block-size:1.4rem; background:currentColor; mask:url(assets/brand-arrow.svg) center/contain no-repeat; }
[qcms-name=offer-links] a::after { color:var(--color); }

.site :is([qcms-name$="-faq"],[qcms-name=arbeiten-3-project-context],[qcms-name=angebot-2-approach],[qcms-name=kontakt-2-contact-next]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:min-content 1fr; gap:0 clamp(2.5rem,5vw,4rem); align-items:start; }
.site :is([qcms-name$="-faq"],[qcms-name=arbeiten-3-project-context],[qcms-name=angebot-2-approach],[qcms-name=kontakt-2-contact-next])>[qcms-name=main] { display:contents; }
.site :is([qcms-name$="-faq"],[qcms-name=arbeiten-3-project-context],[qcms-name=angebot-2-approach],[qcms-name=kontakt-2-contact-next])>[qcms-name=main]>[qcms-name=eyebrow] { grid-column:1; grid-row:1; }
.site :is([qcms-name$="-faq"],[qcms-name=arbeiten-3-project-context],[qcms-name=angebot-2-approach],[qcms-name=kontakt-2-contact-next])>h2 { grid-column:1; grid-row:2; margin-block:1.1rem 0; }
[qcms-name=questions],[qcms-name=arbeiten-3-project-context] [qcms-name=body],[qcms-name=kontakt-2-contact-next] [qcms-name=body] { grid-column:2; grid-row:1 / span 2; }
[qcms-name=questions] { display:block; }
[qcms-name=questions]>details { border-block-end:1px solid var(--color-line); }
[qcms-name=questions] summary { position:relative; list-style:none; padding-block:1.2rem; padding-inline-end:2rem; font-size:1rem; font-weight:500; cursor:pointer; }
[qcms-name=questions] summary::-webkit-details-marker { display:none; }
[qcms-name=questions] summary::after { content:''; position:absolute; inset:1.25rem 0 auto auto; inline-size:1.15rem; block-size:1.15rem; background:currentColor; mask:url(assets/brand-arrow.svg) center/contain no-repeat; }
[qcms-name=questions] details[open]>summary::after { rotate:90deg; }
[qcms-name=questions] [qcms-mod="cont.text"] { color:var(--gray-dark); padding-block-end:1rem; }
[qcms-name=angebot-2-approach] [qcms-name=intro] { grid-column:2; grid-row:1; }
[qcms-name=angebot-2-approach] [qcms-name=steps] { grid-column:2; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); --u2-Gap:1.5rem; border-block-start:1px solid var(--color-line); margin-block-start:2.5rem; padding-block-start:1.5rem; }
[qcms-name=steps] span { font-size:.8rem; font-weight:600; }
[qcms-name=steps] p { font-size:.85rem; color:var(--gray-dark); margin-block:.7rem 0; }
[qcms-name=arbeiten-3-project-context] [qcms-name=link] { grid-column:2; grid-row:3; margin-block-start:.75rem; }

.site :is([qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2.5rem,5vw,4rem); }
.site :is([qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values]) [qcms-name=eyebrow] { grid-column:1; grid-row:1; }
.site :is([qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values])>h2 { grid-column:1; grid-row:2; margin-block:1.1rem 0; }
[qcms-name=qino-3-qino-reasons] [qcms-name=intro] { grid-column:2; grid-row:2; align-self:center; justify-self:end; max-inline-size:26rem; }
.site :is([qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values]) [qcms-name=cards] { grid-column:1 / -1; grid-row:3; grid-template-columns:repeat(3,minmax(0,1fr)); --u2-Gap:3rem; margin-block-start:2.8rem; }
[qcms-name=qino-3-qino-reasons] [qcms-name=cards]>article,[qcms-name=ueber-mich-2-about-values] [qcms-name=cards]>[qcms-mod="cont.text"] { border-block-start:1px solid var(--color-line); padding-block-start:1.5rem; }
[qcms-name=ueber-mich-2-about-values] [qcms-name=cards] h3 { margin-block:0 1.2rem; }
[qcms-name=ueber-mich-2-about-values] [qcms-name=cards] p { color:var(--gray-dark); }

.site [qcms-name=ueber-mich-3-about-open-source] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 5rem; align-items:start; }
[qcms-name=ueber-mich-3-about-open-source]>[qcms-name=main] { display:contents; }
[qcms-name=ueber-mich-3-about-open-source] [qcms-name=eyebrow] { grid-column:1; grid-row:1; }
.site [qcms-name=ueber-mich-3-about-open-source]>h2 { grid-column:1; grid-row:2; margin-block:1.1rem 1.5rem; }
[qcms-name=narrative] { grid-column:1; grid-row:3; }
[qcms-name=open-source-projects] { grid-column:2; grid-row:1 / span 3; align-self:center; display:block; background:var(--color-area); padding:2rem; border:1px solid var(--color-text); box-shadow:.35rem .4rem 0 var(--color-text); rotate:-1.5deg; min-inline-size:0; }
[qcms-name=open-source-projects] a { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:1.5rem; border-block-end:1px solid var(--color-line); color:inherit; text-decoration:none; }
[qcms-name=open-source-projects] a>span { display:block; min-inline-size:0; font-size:.8rem; color:var(--gray-dark); }
[qcms-name=open-source-projects] strong { display:block; font-size:clamp(2.5rem,4vw,4rem); letter-spacing:-.06em; font-weight:500; line-height:1; color:var(--color-text); margin-block-end:.7rem; }
[qcms-name=open-source-projects] a::after { color:var(--color); }
[qcms-name=open-source-projects] [qcms-name=entry-4] p { font-size:.75rem; margin-block:1.5rem 0; color:var(--gray-dark); }

[qcms-name$="-legal-page"] :is([qcms-mod="cont.text"],[qcms-mod="cont.imprint"],[qcms-mod="cont.privacy"]) { max-inline-size:45rem; margin-block-start:3rem; }
[qcms-name$="-legal-page"] :is([qcms-mod="cont.imprint"],[qcms-mod="cont.privacy"]) [qcms-mod="cont.text"] { margin-block-start:0; }
[qcms-name$="-legal-page"] [qcms-mod^="cont."] h2 { font-size:1.5rem; letter-spacing:-.03em; margin-block:2rem .8rem; }

.site [qcms-name=kontakt-1-contact-page] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:min-content auto auto 1fr; column-gap:5rem; align-content:start; }
[qcms-name=kontakt-1-contact-page]>[qcms-name=main] { display:contents; }
[qcms-name=kontakt-1-contact-page] [qcms-name=eyebrow] { grid-column:1; grid-row:1; }
.site [qcms-name=kontakt-1-contact-page]>h1 { grid-column:1; grid-row:2; margin-block:1.3rem 2rem; }
[qcms-name=contact-copy] { grid-column:1; grid-row:3; }
[qcms-name=contact-copy] .lead { max-inline-size:28rem; }
[qcms-name=contact-copy]>p:last-child { color:var(--gray-dark); margin-block-start:1.5rem; }
[qcms-name=sticker] { grid-column:1; grid-row:4; align-self:start; }
[qcms-name=sticker] .contact-sticker { margin-block-start:4rem; }
[qcms-name=form-label] { grid-column:2; grid-row:1; z-index:1; block-size:0; padding-inline:2rem; translate:0 2rem; }
[qcms-name=form-note] { grid-column:2; grid-row:4; z-index:1; align-self:end; margin:0 2rem 2rem; }
[qcms-name=form-note] .brief-note { margin:0; }
#main [qcms-name=inquiry] { grid-column:2; grid-row:1 / span 4; box-sizing:border-box; inline-size:100%; min-inline-size:0; padding:3.7rem 2rem 5rem; border:1px solid var(--color-line); background:var(--color-area); border-radius:0; }
#main [qcms-name=inquiry] fieldset { border:0; padding:0; margin:0; min-inline-size:0; }
#main [qcms-name=inquiry] legend { padding:0; margin-block:0 1.8rem; font-size:2.4rem; font-weight:500; letter-spacing:-.055em; line-height:1.1; }
#main [qcms-name=inquiry] table { display:block; inline-size:100%; }
#main [qcms-name=inquiry] tbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; }
#main [qcms-name=inquiry] tr { display:block; min-inline-size:0; padding:0; }
#main [qcms-name=inquiry] :is(th,td) { display:block; inline-size:100%; padding:0; border:0; }
#main [qcms-name=inquiry] th { text-align:start; font-size:.85rem; font-weight:400; margin-block-end:.5rem; }
#main [qcms-name=inquiry] td { margin:0; }
#main [qcms-name=inquiry] :is(.-item-topic,.-item-message) { grid-column:1 / -1; }
#main [qcms-name=inquiry] :is(input:not([type=hidden]):not([type=radio]),select,textarea) { box-sizing:border-box; inline-size:100%; margin:0; background:var(--color-bg); }
#main [qcms-name=inquiry] textarea { min-block-size:10rem; }
#main [qcms-name=inquiry] .-radioBoxes { display:flex; flex-wrap:wrap; gap:.5rem; }
#main [qcms-name=inquiry] .-radioBoxes label { position:relative; display:inline-grid; place-items:center; flex:1 1 auto; min-block-size:2.75rem; padding:.55rem .7rem; border:1px solid var(--color-line); border-radius:var(--radius); background:var(--color-bg); font-size:.75rem; cursor:pointer; }
#main [qcms-name=inquiry] .-radioBoxes input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
#main [qcms-name=inquiry] .-radioBoxes label:has(input:checked) { background:var(--lime); border-color:var(--color-text); }
#main [qcms-name=inquiry] .-radioBoxes label:has(input:focus-visible) { outline:.15rem solid var(--accent); outline-offset:.2rem; }
#main [qcms-name=inquiry] .-btns { justify-content:flex-start; margin-block-start:1.5rem; }
#main [qcms-name=inquiry] .-btns button { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; min-block-size:3rem; }
#main [qcms-name=inquiry] .-btns button::after { content:''; inline-size:1.4rem; block-size:1.4rem; background:currentColor; mask:url(assets/brand-arrow.svg) center/contain no-repeat; }

@media(width<60rem) {
  .site :is([qcms-name$="-faq"],[qcms-name=arbeiten-3-project-context],[qcms-name=angebot-2-approach],[qcms-name=kontakt-2-contact-next],[qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values],[qcms-name=ueber-mich-3-about-open-source],[qcms-name=kontakt-1-contact-page]) { display:flex; flex-direction:column; gap:0; }
  .site [qcms-mod="cont.section"] [qcms-name=eyebrow] { order:-1; }
  [qcms-name=qino-3-qino-reasons] [qcms-name=intro] { align-self:start; }
  [qcms-name=open-source-projects] { margin-block-start:3rem; }
  [qcms-name=form-label] { position:relative; z-index:1; block-size:auto; translate:none; margin-block:2rem -3.7rem; padding:2rem 2rem 0; }
  #main [qcms-name=inquiry] { margin-block-start:2rem; }
  [qcms-name=kontakt-1-contact-page]>h1 { order:0; }
  [qcms-name=contact-copy] { order:1; }
  [qcms-name=sticker] { order:2; }
  [qcms-name=form-label] { order:3; }
  #main [qcms-name=inquiry] { order:4; }
  [qcms-name=form-note] { order:5; margin-block:-5rem 2rem; }
}
@media(width<45rem) {
  [qcms-name=offer-links] { --u2-Items-width:calc((100% - 1.5rem) / 2); }
  .site :is([qcms-name=qino-3-qino-reasons],[qcms-name=ueber-mich-2-about-values]) [qcms-name=cards],[qcms-name=angebot-2-approach] [qcms-name=steps] { grid-template-columns:1fr; gap:2rem; }
  #main [qcms-name=inquiry] tbody { grid-template-columns:1fr; }
  #main [qcms-name=inquiry] :is(.-item-topic,.-item-message) { grid-column:1; }
  #main [qcms-name=inquiry] .-radioBoxes label { flex-basis:calc(50% - .5rem); }
  .brand cms-image,.footer-brand cms-image { inline-size:9.5rem; }
}
@media(width>=45rem) and (width<72rem) { .brand cms-image,.footer-brand cms-image { inline-size:10.5rem; } }