/* WeDrawer teaser section (#skizze) on the homepage. Colours come from the active site theme. */
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url(../skizze/fonts/kalam-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body.era-2026 .sketch-cta{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
body.era-2026 .sketch-cta>div>p{max-width:56ch;color:var(--ink-dim)}
body.era-2026 .sketch-steps{list-style:none;margin:22px 0;padding:0;display:grid;gap:0;counter-reset:sk;max-width:56ch}
body.era-2026 .sketch-steps li{counter-increment:sk;display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink-dim);font-size:15px}
body.era-2026 .sketch-steps li:last-child{border-bottom:1px solid var(--line)}
body.era-2026 .sketch-steps li::before{content:"0" counter(sk);grid-row:span 2;font:12px/1.9 var(--f-mono);color:var(--accent)}
body.era-2026 .sketch-steps b{color:var(--ink);font-family:var(--f-display);font-size:14px;letter-spacing:.02em}
body.era-2026 .sketch-card{display:grid;gap:18px;padding:26px;border:1px solid var(--line-2);background:var(--bg-elev);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
body.era-2026 .sketch-card:hover{border-color:var(--accent);transform:translateY(-2px)}
body.era-2026 .sketch-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
body.era-2026 .sketch-art{width:100%;height:auto;display:block}
.sketch-art .frame{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5}
.sketch-art .bar{fill:var(--bg-raise)}
.sketch-art .dot{fill:var(--line-2)}
.sketch-art .blk{fill:var(--ink);opacity:.1}
.sketch-art .txt{fill:var(--ink);opacity:.28}
.sketch-art .head{fill:var(--ink);opacity:.75}
.sketch-art .btn{fill:var(--accent)}
.sketch-art .ink{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sketch-art .note{fill:#ffe27a}
.sketch-art .note-t{fill:#3d3212;font:17px 'Kalam','Comic Sans MS',cursive}
.sketch-art .pin{fill:#e0483c}
.sketch-art .pin-t{fill:#fff;font:700 11px Arial,sans-serif}
body.era-2026 .sketch-open{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:15px 18px;font-size:13px;font-family:var(--f-display);letter-spacing:.03em}
body.era-2026 .sketch-card:hover .sketch-open{background:var(--accent);color:var(--accent-ink)}
body.era-2026 .sketch-hint{font-size:12px;color:var(--ink-dim);margin:0}
body.era-2026 .contact-sketch{font-size:14px;color:var(--ink-dim);margin:-6px 0 18px}
body.era-2026 .contact-sketch a{color:var(--ink);border-bottom:1px solid var(--line-2)}
@media (prefers-reduced-motion:reduce){body.era-2026 .sketch-card{transition:none}body.era-2026 .sketch-card:hover{transform:none}}
@media(max-width:860px){body.era-2026 .sketch-cta{grid-template-columns:1fr;gap:24px}}
/* 1993 mode: plain link, no illustration */
body.era-1993 .sketch-art{display:none}

/* An actual example of our work, with a screenshot of the public editor. */
body.era-2026 .sketch-cta{gap:32px;grid-template-columns:1fr 1fr;background:var(--bg-elev);border-block:1px solid var(--line)}
body.era-2026 .case-facts{margin:22px 0}
body.era-2026 .case-facts>div{border-top:1px solid var(--line);padding:12px 0}
body.era-2026 .case-facts dt{font-weight:700;font-size:15px;margin-bottom:4px}
body.era-2026 .case-facts dd{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6}
body.era-2026 .sketch-card{padding:14px;gap:14px;background:var(--bg)}
body.era-2026 .case-screenshot{width:100%;height:auto;border:1px solid var(--line-2)}
body.era-2026 .sketch-open{font-size:14px;letter-spacing:0}
body.era-2026 .sketch-hint{font-size:13px}
@media(max-width:860px){body.era-2026 .sketch-cta{grid-template-columns:1fr;gap:18px}}
body.era-1993 .case-screenshot{max-width:420px}