:root{--accent:#a73325;--deep:#2d3c31;--deep-ink:#f1f0e5;--panel:#e9e6dc;--panel-2:#e2ddd0;--line:#b8bbae;--soft-ink:#3f453f;--pad:6%;--wide:1660px}
@media(min-width:1900px){:root{--pad:max(6%,calc((100% - var(--wide))/2))}}


body.js-reveal .reveal{opacity:0;transform:translateY(22px);filter:blur(10px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
body.js-reveal .reveal.is-in{opacity:1;transform:none;filter:none}


.section-head{max-width:1100px;margin-bottom:56px}
.section-head h2,.about h2,.contact h2,.me h2{font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.035em;font-weight:500;margin:18px 0 0;text-wrap:balance}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--soft-ink);max-width:40em;margin:26px 0 0}


.about{display:block;padding:110px var(--pad) 40px;background:var(--paper)}

.masthead .motion-switch{display:none}
.about-heading{max-width:1200px}
.about-figure{margin:64px 0 0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:21/9;background:var(--panel)}
.about-figure img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.about-panel{position:relative;z-index:1;max-width:660px;margin:-130px 0 0 4%;background:var(--paper);padding:40px 44px 34px;box-shadow:0 30px 70px -30px rgba(36,41,35,.45);border-radius:6px}
.about-panel p{font-size:19px;line-height:1.6;margin:0 0 20px;color:var(--ink)}
.about-panel p:last-child{margin:0}


.services{background:var(--panel);padding:96px var(--pad) 90px}
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px 6%;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.service:nth-of-type(even) .service-text{order:2}
.service-num{display:block;font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.service h3{font-size:clamp(32px,3.8vw,56px);line-height:1;letter-spacing:-.03em;font-weight:500;margin:14px 0 0}
.service-claim{font-size:clamp(20px,1.6vw,24px);font-weight:500;line-height:1.35;letter-spacing:-.01em;margin:22px 0 0;max-width:22em;color:var(--ink)}
.service-text>p:not(.service-claim){font-size:17px;line-height:1.6;color:var(--soft-ink);max-width:36em;margin:18px 0 0}
.service-text>p.service-note{font-size:15px;color:var(--muted);padding-top:16px;border-top:1px solid var(--line);margin-top:22px}
.service-media{margin:0;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--panel-2);box-shadow:0 0 0 1px rgba(36,41,35,.1),22px 40px 80px -30px rgba(36,41,35,.45)}
.service-media img{width:100%;height:100%;object-fit:cover}
.service-media--browser{aspect-ratio:1200/750;background:#e9e4d8}

.service-media.service-media--chat{background:linear-gradient(160deg,#33443a,#243128 60%,#1d2721);aspect-ratio:4/3;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:6%;padding:8% 7%;align-items:center;color:var(--deep-ink);box-shadow:0 0 0 1px rgba(36,41,35,.2),22px 40px 80px -30px rgba(36,41,35,.6)}
.chat{display:grid;gap:10px;align-content:center}
.bubble{max-width:92%;padding:12px 15px;border-radius:16px;font-size:14px;line-height:1.45;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.bubble p{margin:0}
.bubble--them{background:rgba(243,240,233,.96);color:var(--ink);border-bottom-left-radius:4px;justify-self:start}
.bubble--me{background:#e5edbc;color:#2b392c;border-bottom-right-radius:4px;justify-self:end}
.site-snip{background:var(--paper);color:var(--ink);border-radius:12px;padding:18px 18px 16px;display:grid;gap:8px;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.snip-label{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--muted)}
.site-snip strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
.site-snip dl{margin:0;display:grid;gap:6px;font-size:13px}
.site-snip dl>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px}
.site-snip dt{color:var(--muted)}
.site-snip dd{margin:0;font-weight:500;display:grid;text-align:right}
.snip-change .old,.snip-change .new{grid-area:1/1}
.snip-change .new{color:var(--accent)}
.snip-change .old{visibility:hidden}
body.js-reveal .snip-change .old,body.js-reveal .snip-change .new{visibility:visible;transition:opacity .6s,filter .6s}
body.js-reveal .snip-change .new{opacity:0;filter:blur(6px)}
body.js-reveal .service.is-in .snip-change .old{opacity:0;filter:blur(6px);transition-delay:2.6s}
body.js-reveal .service.is-in .snip-change .new{opacity:1;filter:none;transition-delay:2.6s}
body.js-reveal .bubble{opacity:0;transform:translateY(10px);filter:blur(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1)}
body.js-reveal .service.is-in .bubble{opacity:1;transform:none;filter:none}
body.js-reveal .service.is-in .bubble:nth-child(1){transition-delay:.4s}
body.js-reveal .service.is-in .bubble:nth-child(2){transition-delay:1.3s}
body.js-reveal .service.is-in .bubble:nth-child(3){transition-delay:2.3s}
.process{margin-top:80px}
.process .eyebrow{margin:0 0 6px}
.process .process-list{margin-top:14px}



.works{padding:120px var(--pad) 110px;background:var(--panel)}
.work{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:#f7eddc;color:var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(36,41,35,.1),28px 48px 100px -30px rgba(64,43,25,.4);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.work:hover{transform:translateY(-6px)}

.work+.work{margin-top:36px}
.work-media{display:block;aspect-ratio:3/2;min-height:100%}
.work-media img{width:100%;height:100%;object-fit:cover}

@media(min-width:1101px){
  .work-media{position:relative;aspect-ratio:auto;min-height:0}
  .work-media::before{content:"";display:block;padding-top:66.6667%}
  .work-media img{position:absolute;inset:0}
}
.work-body{display:flex;flex-direction:column;gap:14px;padding:44px 48px}
.work-kicker{font-size:11px;letter-spacing:.14em;font-weight:600;color:#7c6b53}
.work-body strong{font:600 clamp(40px,4.6vw,66px)/1 Fraunces,serif;color:var(--accent);letter-spacing:-.01em}
.work-text{font-size:17px;line-height:1.6;color:var(--soft-ink);max-width:30em}
.work-link{margin-top:auto;padding-top:22px;font-size:15px;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.works-more{margin:28px 0 0;font-size:15px;color:var(--muted);max-width:44em;line-height:1.6}


.me{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px 8%;align-items:start;padding:120px var(--pad);background:var(--paper)}
.me h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;font-weight:500;margin:48px 0 12px}
.me-text>p.body{font-size:17px;line-height:1.6;color:var(--soft-ink);max-width:36em;margin:22px 0 0}
.facts{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:10px 12px}
.facts li{font-size:12px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--soft-ink)}
.me-photo{margin:0;aspect-ratio:4/5;border-radius:16px;background:var(--panel-2);position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(36,41,35,.1),22px 40px 80px -30px rgba(36,41,35,.4)}
.me-photo img{width:100%;height:100%;object-fit:cover}
.me-photo--pending{outline:2px dashed #9a9e91;outline-offset:-14px;display:grid;place-items:center}
.pending-mark{font-size:12px;letter-spacing:.16em;font-weight:600;text-align:center;line-height:1.8;color:#7b8177}

.me--ohne-foto{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding-top:104px;padding-bottom:104px}
.me--ohne-foto .me-text{padding-top:calc(56px + min(.6vw,9px))}
.me--ohne-foto .me-text>.lead{margin-top:0}


.contact{background:var(--deep);color:var(--deep-ink);padding:120px var(--pad) 100px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px 7%;align-items:start}

.contact-heading{grid-column:1;grid-row:1}
.contact-copy{grid-column:1;grid-row:2}
.contact .inquiry{grid-column:2;grid-row:1/span 2;align-self:start;margin-top:calc(56px + min(.6vw,9px))}
.contact h2{max-width:14ch;margin-top:22px}
.contact-copy{display:flex;flex-direction:column;padding-top:10px}
.contact-copy>p.body{font-size:20px;line-height:1.55;margin:0 0 34px;max-width:24em}
.contact-details{display:grid;gap:12px;padding-top:24px;border-top:1px solid rgba(243,240,233,.28);font-size:17px;margin:0}
.contact-details a{border-bottom:1px solid transparent;width:max-content;transition:border-color .3s}
.contact-details a:hover{border-color:currentColor}
.contact-copy p.contact-alt{font-size:15px;color:rgba(241,240,229,.72);margin:30px 0 0;max-width:30em;line-height:1.6}
.inquiry{position:relative;background:var(--paper);color:var(--ink);border-radius:16px;padding:40px 44px 36px;display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.field{display:flex;flex-direction:column;gap:9px;min-width:0}
.field--wide{grid-column:1/-1}
.field>label,.field legend{font-size:12px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--soft-ink);padding:0}
.choices label{text-transform:none;letter-spacing:0;font-size:15px;font-weight:500}
.field label small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:8px;font-size:12px}
.inquiry input:not([type=radio]),.inquiry textarea{background:#fbfaf6;border:1px solid var(--line);border-radius:6px;padding:15px 16px;font-size:17px;color:var(--ink);width:100%;transition:border-color .25s,box-shadow .25s}
.inquiry input:focus,.inquiry textarea:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(45,60,49,.18)}
.inquiry textarea{font:inherit;resize:vertical;min-height:140px;line-height:1.5}
fieldset.field{border:0;padding:0;margin:0;gap:12px}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choices span{display:inline-block;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:500;background:#fbfaf6;transition:background .25s,color .25s,border-color .25s}
.choices input:checked+span{background:var(--deep);color:var(--deep-ink);border-color:var(--deep)}
.choices input:focus-visible+span{outline:3px solid #47716a;outline-offset:3px}
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:6px;flex-direction:row}

.send-button{background:var(--deep);color:var(--deep-ink);padding:20px 40px;display:inline-flex;justify-content:center;align-items:center;font-size:17px;font-weight:500;border-radius:999px;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s,opacity .3s}
.send-button:hover{transform:translateY(-3px);background:#3a4c3f}
.send-button:disabled{opacity:.6;cursor:wait;transform:none}
.form-privacy{font-size:13px;line-height:1.55;color:var(--muted);margin:0;max-width:28em}
.form-privacy a{text-decoration:underline}
.form-status{grid-column:1/-1;margin:0;font-size:16px;line-height:1.5}
.form-status:empty{display:none}
.form-status a{text-decoration:underline}
.inquiry.is-sent .field,.inquiry.is-sent .hp{display:none}
.inquiry.is-sent .form-status{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.3;padding:24px 0}



.site-foot{position:relative;color:var(--deep-ink);background:#1b241d;border-top:1px solid rgba(241,240,229,.12);padding:52px var(--pad) 30px;display:block;overflow:hidden;font-size:15px}

.foot-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:34px 8%;align-items:end;margin:0}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.site-foot .footer-mark{font-size:clamp(36px,3.4vw,50px);letter-spacing:-.04em;font-weight:600;color:var(--deep-ink);line-height:1}
.site-foot .footer-mark .brand-dot{color:var(--accent)}
.foot-sub{font-size:11px;letter-spacing:.16em;font-weight:600;color:rgba(241,240,229,.72)}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:560px;margin-left:auto}
.foot-cols>div{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-label{font-size:11px;letter-spacing:.14em;font-weight:600;color:rgba(241,240,229,.6);margin-bottom:6px}
.foot-cols a{width:max-content;border-bottom:1px solid transparent;transition:border-color .3s}
.foot-cols a:hover{border-color:currentColor}
.foot-note{grid-column:1/-1;font-size:13px;line-height:1.6;color:rgba(241,240,229,.72);max-width:66em;margin:0;padding-top:22px;border-top:1px solid rgba(241,240,229,.2)}
.foot-copy{grid-column:1/-1;font-size:12px;color:rgba(241,240,229,.55);margin:6px 0 0}

@media(max-width:1000px){
  .service{grid-template-columns:1fr;gap:28px;padding:48px 0}
  .service:nth-of-type(even) .service-text{order:0}
  .work{grid-template-columns:1fr}
  .work-media{aspect-ratio:16/10;min-height:0}
  .me{grid-template-columns:1fr;gap:40px}
  .me-photo{max-width:420px}
  .me--ohne-foto .me-text{padding-top:0}
  .contact{grid-template-columns:1fr;gap:40px}
  .contact-heading,.contact-copy,.contact .inquiry{grid-column:auto;grid-row:auto;margin-top:0}
  .foot-inner{grid-template-columns:1fr;gap:36px}
  .about-panel{margin-top:-60px}
}
@media(max-width:700px){
  .about{padding:56px 24px 24px}
  .section-head{margin-bottom:36px}
  .lead{font-size:17px;margin-top:18px}
  .about-figure{margin-top:34px;aspect-ratio:4/3;border-radius:12px}
  .about-panel{margin:-28px 0 0;padding:26px 22px;max-width:none}
  .about-panel p{font-size:16px}
  .services{padding:64px 24px 48px}
  .service h3{font-size:32px}
  .service-claim{font-size:19px}
  .service-text>p:not(.service-claim){font-size:16px}
  .service-media{border-radius:12px}
  .service .service-media.service-media--chat{aspect-ratio:auto;height:auto;min-height:0;grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .process{margin-top:48px}
  .works{padding:64px 24px 60px}
  .work{border-radius:12px}
  .work-body{padding:26px 22px}
  .work-body strong{font-size:38px}
  .work-text{font-size:16px}
  .me{padding:64px 24px}
  .me-text>p.body{font-size:16px}
  .facts{margin-top:30px}
  .facts li{font-size:11px;padding:9px 12px}
  .contact{padding:64px 24px 56px}
  .contact h2{margin-top:20px}
  .contact-copy>p.body{font-size:17px;margin-bottom:24px}
  .contact-details{font-size:16px}
  .inquiry{grid-template-columns:1fr;padding:24px 20px;gap:20px;border-radius:12px}
  .inquiry input:not([type=radio]),.inquiry textarea{font-size:16px;padding:14px}
  .send-button{width:100%;padding:18px 24px;font-size:16px}
  .site-foot{padding:36px 24px 24px}
  .site-foot .footer-mark{font-size:34px}
  .foot-cols{grid-template-columns:1fr;gap:22px;max-width:none;margin-left:0}
  .foot-note{margin-top:28px}
}


:root[data-seitenende="true"]{background:#1b241d}