/* A personal notebook, joined by one continuous thread. */
.page-projekt{--thread:#c7443c;--thread-dark:#9d302c;background:#faf7ef}
.page-projekt #inhalt{position:relative;isolation:isolate;overflow:clip;background-image:radial-gradient(#a7957c19 .7px,transparent .7px);background-size:23px 23px}
.page-projekt #inhalt>section,.page-projekt .process-map{position:relative;z-index:1}
.page-projekt .thread-hero{padding-top:84px;padding-bottom:74px}
.page-projekt .thread-hero>.eyebrow{color:var(--thread-dark)}
.page-projekt .thread-hero .display{max-width:780px;font-size:clamp(62px,7.7vw,110px)}
.page-projekt .thread-hero .display .serif{color:var(--thread)}
.page-projekt .thread-hero>.lead{max-width:650px}
.page-projekt .thread-hero{min-height:560px}
.page-projekt .thread-hero>.eyebrow,.page-projekt .thread-hero>.display,.page-projekt .thread-hero>.lead,.page-projekt .thread-hero>.case-meta{position:relative;z-index:1}
.thread-macro{position:absolute;right:-45px;top:38px;width:520px;max-width:50%;mix-blend-mode:multiply;pointer-events:none}
.thread-macro img{width:100%;height:auto;mask-image:radial-gradient(ellipse at 56% 49%,#000 35%,#000b 58%,transparent 76%)}
.thread-macro figcaption{position:absolute;right:5%;bottom:1%;font:italic 23px/1.2 Georgia,serif;transform:rotate(5deg);color:var(--thread-dark)}
.thread-hero-art{position:absolute;right:0;top:75px;width:390px;height:260px;pointer-events:none}
.thread-hero-art span{position:absolute;right:10px;bottom:0;font:italic 23px/1.2 Georgia,serif;transform:rotate(5deg);color:var(--thread-dark)}
.page-projekt .case-meta{border:0;gap:16px 44px;padding-top:20px;margin-top:24px}
.page-projekt .case-meta>div{padding:12px 16px;background:#fffdf7d9;border:1px solid #e7e0d4;border-radius:4px 13px 8px 4px}
.page-projekt .case-meta>div:last-child dd:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#6b855c;margin-right:7px}
.thread-notes{position:absolute;right:12px;top:58px;width:280px;height:265px;pointer-events:none}
.thread-note{position:absolute;padding:22px 24px;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.04em;box-shadow:0 9px 20px #57412c0c,1px 2px 0 #715f4512;border:1px solid #9f7f4310}
.thread-note>i{display:block;font:12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.02em;margin-bottom:16px;color:#766248}
.thread-note>span{display:block;font-size:11px;font-weight:400;margin-top:7px;letter-spacing:0}
.note-source{top:38px;left:8px;background:#f5e6a5;transform:rotate(-8deg)}
.note-next{right:-4px;top:124px;background:#e8edff;transform:rotate(6deg)}
.thread-scribble{position:absolute;top:2px;left:43px;color:var(--thread);font:italic 23px/1.3 Georgia,serif;transform:rotate(5deg)}
.thread-notes svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--thread);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.page-projekt .process-map{background:#fffdf7;border:1px dashed #c7443c60;box-shadow:0 6px 0 #f0e8da70;border-radius:50px;padding:25px 38px;color:#34433a;margin-bottom:30px}
.page-projekt .process-map span[aria-hidden]{color:var(--thread)}
.page-projekt .section-heading>.index{color:var(--thread-dark)}
.page-projekt .section-heading h2 .serif{color:#a7433c}
.page-projekt .thread-start:before{content:'';position:absolute;inset:24px -30px 26px;z-index:-1;border-radius:17px 34px 24px 14px;background:#f8eddb}
.page-projekt .thread-start>.split>.lead{position:relative;padding:24px 27px 32px;background:#fffdf7;box-shadow:4px 5px 0 #c8ad7220;align-self:start;border-radius:2px 7px 4px 3px;transform:rotate(-1.4deg);font-size:24px}
.page-projekt .thread-start>.split>.lead:before{content:'';position:absolute;top:-11px;left:calc(50% - 35px);width:70px;height:22px;background:#e6c67d83;transform:rotate(3deg)}
.page-projekt .thread-build{padding-bottom:92px}
.page-projekt .thread-build .rule-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.page-projekt .thread-build .rule-list>article,.page-projekt .thread-build .rule-list>article:first-child{padding:27px;background:#fffdf8;border:1px solid #deddd0;border-radius:6px 19px 8px 15px;grid-template-columns:34px 1fr;gap:18px;box-shadow:0 4px 0 #cfc4af20;transition:transform .22s,box-shadow .22s}
.page-projekt .thread-build .rule-list>article:nth-child(2){background:#edf1e5}
.page-projekt .thread-build .rule-list>article:nth-child(3){background:#eaf0f7}
.page-projekt .thread-build .rule-list>article:nth-child(4){background:#f8eadf}
.page-projekt .thread-build .rule-list>article:last-child{grid-column:1/-1;background:#f6efcc}
.page-projekt .thread-build .rule-list>article>.index{width:32px;height:32px;padding:0;display:grid;place-items:center;border:1px solid #c7443c65;color:var(--thread-dark);border-radius:50%;font-size:10px}
.page-projekt .thread-build .rule-list h3{font-size:22px;line-height:1.22}
.page-projekt .thread-build .rule-list p{font-size:14px}
@media(hover:hover){.page-projekt .thread-build .rule-list>article:hover{transform:translateY(-3px);box-shadow:0 9px 20px #5a49390a}}
.page-projekt .thread-workshop{background:#e8ecfa;color:var(--ink);border-radius:26px 26px 16px 16px;margin-top:8px}
.page-projekt .thread-workshop .index,.page-projekt .thread-workshop .note,.page-projekt .thread-workshop p{color:#506063}
.page-projekt .thread-workshop h2 .serif{color:#4258a0}
.page-projekt .flow-demo{display:grid;grid-template-columns:.8fr 1.3fr;gap:32px;align-items:start;border:0}
.page-projekt .flow-source{position:relative;background:#fff8db;border:1px solid #d8cc9c80;border-radius:3px;box-shadow:3px 7px 0 #75739112;transform:rotate(-1.2deg);margin-top:10px}
.page-projekt .flow-source:before{content:'';position:absolute;top:-12px;left:calc(50% - 40px);width:80px;height:24px;background:#c9d2efb3;transform:rotate(3deg)}
.page-projekt .flow-source .eyebrow{color:#825b28}
.page-projekt .flow-source blockquote{font-size:26px;color:#3b4541}
.page-projekt .flow-workspace{background:#fffdf8;border:1px solid #c7d0dc;border-radius:15px;padding:27px 30px;box-shadow:0 6px 0 #7885a212}
.page-projekt .flow-nav{border-bottom-color:#e1ded4;gap:4px;margin-bottom:26px}
.page-projekt .flow-nav button{color:#47525c;border:0;border-radius:5px 5px 0 0;padding:13px 12px;min-height:46px;font-size:11px}
.page-projekt .flow-nav button:hover{background:#f4ece2}
.page-projekt .flow-nav button[aria-pressed=true]{color:#fffdf7;background:var(--thread)}
.page-projekt #flow-content{min-height:350px}
.page-projekt #flow-content .eyebrow{color:var(--thread-dark)}
.page-projekt #flow-content h3{font-size:30px}
.page-projekt #flow-content .note{border-top-color:#dddcd3}
.page-projekt .thread-takeaway{padding-top:94px}
.page-projekt .thread-takeaway .quote{position:relative;padding:24px 28px 30px;align-self:start;background:#e8eedb;border-radius:28px 6px 24px 5px;color:#385644;font-size:32px}
.page-projekt .thread-takeaway .quote:after{content:'↗';display:block;text-align:right;font:36px/1 Georgia,serif;color:#788d63;margin-top:16px}
.page-projekt .easter-egg{border:1px dashed #c7443c80;background:#fff6e8;border-radius:12px;padding:24px 28px;margin-top:44px}
.page-projekt .easter-egg summary{color:var(--thread-dark)}
.page-projekt .easter-egg .text-column{padding-bottom:5px}
.page-projekt .thread-next{margin-top:15px;padding:65px 42px 85px!important;background:#f7e6df;border-radius:14px 32px 0 0}
.page-projekt .thread-next .eyebrow{color:var(--thread-dark)}
.page-projekt .thread-next .button{background:var(--thread);border-color:var(--thread);border-radius:3px}
.page-projekt .thread-next .button:hover{background:var(--thread-dark)}
.red-thread{position:absolute;inset:0;z-index:2;display:block;width:100%;pointer-events:none;overflow:visible;fill:none;stroke:var(--thread);stroke-linecap:round;stroke-linejoin:round}
.red-thread .thread-guide{opacity:.12;stroke-width:5;stroke:#c7443c}
.red-thread .thread-shadow{stroke:#4d2420;stroke-width:9;opacity:.15;transform:translate(1px,2px)}
.red-thread .thread-drawn{stroke:#a31f22;stroke-width:7}
.red-thread .thread-fibres{stroke:url(#thread-fibres);stroke-width:6}
.red-thread .thread-shine{stroke:#ffbeaa;stroke-width:1.15;stroke-dasharray:1 3.2;opacity:.75}
.red-thread .thread-stop{fill:#faf7ef;stroke-width:1.7}
.red-thread .thread-stop.is-passed{fill:var(--thread)}
.red-thread .thread-tip{fill:var(--thread);stroke:#faf7ef;stroke-width:2}
@media(max-width:1180px){.thread-notes{position:relative;top:auto;right:auto;height:195px;width:300px;margin:23px 25px 10px auto}.thread-scribble{top:0;left:10px}.note-source{left:0;top:36px}.note-next{top:91px;right:0}.thread-notes svg{height:190px}.page-projekt .thread-hero{padding-bottom:45px}.page-projekt .case-meta{margin-top:35px}.page-projekt .flow-demo{gap:22px;grid-template-columns:.75fr 1.15fr}}
@media(max-width:760px){.page-projekt .thread-hero{padding-top:44px;padding-bottom:35px}.page-projekt .thread-hero .display{font-size:clamp(51px,10.8vw,76px)}.page-projekt .case-meta{gap:9px;margin-top:24px}.page-projekt .case-meta>div{padding:10px 11px;min-width:0}.page-projekt .case-meta dd{font-size:10px}.page-projekt .case-meta dt{font-size:8px}.thread-notes{height:183px;width:282px;max-width:100%;margin:20px 9px 14px auto}.thread-scribble{font-size:21px}.thread-note{font-size:17px;padding:18px 20px}.note-next{right:0;top:86px}.thread-note>i{margin-bottom:11px}.page-projekt .process-map{border-radius:14px;gap:6px;font-size:9px;padding:19px 12px;margin-bottom:9px}.page-projekt .thread-start:before{inset:12px -7px 19px;border-radius:13px}.page-projekt .thread-start>.split>.lead{padding:21px 23px 26px;font-size:21px;margin-bottom:28px;transform:rotate(-.7deg)}.page-projekt .text-column p:not(.lead){font-size:14px;line-height:1.75}.page-projekt .thread-build .rule-list{display:block}.page-projekt .thread-build .rule-list>article,.page-projekt .thread-build .rule-list>article:first-child{padding:22px 19px;grid-template-columns:28px 1fr;gap:12px}.page-projekt .thread-build .rule-list>article+article{margin-top:14px}.page-projekt .thread-build .rule-list>article>.index{width:26px;height:26px;font-size:9px}.page-projekt .thread-build .rule-list h3{font-size:20px}.page-projekt .thread-build .rule-list p{font-size:13px}.page-projekt .thread-build{padding-bottom:52px}.page-projekt .thread-workshop{border-radius:20px 20px 12px 12px}.page-projekt .flow-demo{display:block}.page-projekt .flow-source{padding:25px;margin:20px 3px 27px}.page-projekt .flow-source blockquote{font-size:24px}.page-projekt .flow-workspace{padding:21px}.page-projekt .flow-nav{gap:2px;flex-wrap:nowrap}.page-projekt .flow-nav button{font-size:10px;padding:11px 8px}.page-projekt #flow-content{min-height:375px}.page-projekt #flow-content h3{font-size:28px}.page-projekt #flow-content p:not(.note){font-size:14px}.page-projekt .thread-takeaway{padding-top:60px}.page-projekt .thread-takeaway .quote{font-size:28px;padding:24px}.page-projekt .thread-takeaway .split>.text-column{margin-top:27px}.page-projekt .easter-egg{padding:20px;margin-top:31px}.page-projekt .easter-egg summary{font-size:27px}.page-projekt .thread-next{padding:43px 22px 64px!important;width:calc(100% - 30px)}.page-projekt .thread-next h2{font-size:33px}.page-projekt .thread-next .lead{font-size:17px}.red-thread .thread-drawn{stroke-width:1.7}}
@media(prefers-reduced-motion:reduce){.red-thread .thread-tip{display:none}}
@media(max-width:1180px){.page-projekt .thread-hero{min-height:0}.thread-macro{position:relative;top:auto;right:auto;width:530px;max-width:100%;margin:8px -10px 15px auto}.thread-macro figcaption{right:8%;bottom:7%}}
@media(max-width:760px){.thread-macro{width:calc(100% + 15px);max-width:none;margin:8px -8px 5px}.thread-macro figcaption{font-size:19px;right:5%;bottom:3%}}
@media(max-width:1180px){.thread-hero-art{position:relative;top:auto;right:auto;width:min(390px,100%);height:220px;margin:20px 0 12px auto}}
@media(max-width:760px){.thread-hero-art{height:180px;margin:15px 0 8px}.thread-hero-art span{font-size:19px;right:8px}.red-thread .thread-drawn{stroke-width:6}.red-thread .thread-fibres{stroke-width:5}.red-thread .thread-shadow{stroke-width:8}}
@media print{.red-thread,.thread-notes{display:none}.page-projekt #inhalt{background:none}.page-projekt .thread-next,.page-projekt .thread-workshop,.page-projekt .flow-workspace,.page-projekt .flow-source,.page-projekt .thread-build .rule-list>article{background:#fff;box-shadow:none;transform:none}.page-projekt .thread-build .rule-list{display:block}}