/* techtumbler Blog – Eleventy Etappe 2 / Designsystem V1.6.1 */
.blog-page{min-width:320px}
.blog-page .blog-nav-active{color:var(--accent);font-weight:800}
.blog-page .blog-breadcrumb{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);padding:28px 0 0;flex-wrap:wrap}
.blog-page .blog-breadcrumb a:hover{color:var(--accent)}
.blog-page .blog-breadcrumb span:nth-child(even){color:var(--accent)}
.blog-hero{background:radial-gradient(ellipse at 75% 30%,rgba(146,195,110,.085),transparent 45%);border-bottom:1px solid var(--line-soft)}
.blog-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(28px,6vw,82px);padding:76px 0 111px}
.blog-hero h1{font-size:clamp(57px,6.3vw,92px);font-weight:800;line-height:1.035;letter-spacing:-.082em;margin:0 0 32px}
.blog-hero h1 em{color:var(--accent);font-style:normal}
.blog-lead{font-size:clamp(19px,2vw,25px);letter-spacing:-.03em;line-height:1.45;max-width:560px;margin:0 0 20px}
.blog-hero-muted{font-size:14px;max-width:515px;color:var(--muted);line-height:1.8}
.blog-hero-graphic{min-height:390px;background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:31px 33px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.blog-hero-graphic::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--line-soft) 1px,transparent 1px),linear-gradient(var(--line-soft) 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(90deg,transparent,black)}
.blog-hero-graphic>*{position:relative}
.blog-graphic-top{font-size:11px;letter-spacing:.09em;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blog-graphic-lines{display:flex;flex-direction:column;gap:21px;transform:rotate(-3deg);padding-left:10px}
.blog-graphic-lines span{background:var(--bg);border:1px solid var(--line);padding:16px 17px;border-radius:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(11px,1.25vw,16px);color:var(--text)}
.blog-graphic-lines b{color:var(--accent);font-weight:900}
.blog-graphic-bottom{display:flex;align-items:end;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:750}
.blog-graphic-bottom strong{font-size:48px;letter-spacing:-.1em;color:var(--text);line-height:.9}
.blog-graphic-bottom strong span{color:var(--accent)}
.blog-listing{padding:98px 0 118px}
.blog-section-top{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:34px}
.blog-section-top h2,.blog-outro h2{font-size:clamp(40px,4.5vw,64px);font-weight:780;line-height:1.1;letter-spacing:-.07em;margin:0}
.blog-section-top h2 span,.blog-outro h2 span{color:var(--accent)}
.blog-section-top>p{font-size:14px;color:var(--muted);margin:0 0 5px}
.blog-post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.blog-teaser{background:var(--panel);border:1px solid var(--line);border-radius:17px;min-height:278px;padding:29px 30px 25px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.blog-teaser:hover{transform:translateY(-2px);border-color:var(--accent)}
.blog-teaser-featured{grid-column:span 2;min-height:310px;background:var(--bg-2);padding:40px}
.blog-teaser-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:11px}
.blog-category{font-size:10px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.blog-teaser h3{font-size:clamp(24px,2.6vw,37px);letter-spacing:-.055em;line-height:1.13;max-width:720px;margin:32px 0 13px}
.blog-teaser-featured h3{font-size:clamp(32px,4vw,52px)}
.blog-teaser h3 a:hover{color:var(--accent)}
.blog-teaser>p{font-size:14px;color:var(--muted);max-width:680px}
.blog-teaser-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px;margin-top:auto;font-size:12px;color:var(--muted)}
.blog-teaser-foot a{color:var(--accent);font-weight:750}
.blog-preview-tag{border:1px solid var(--accent);border-radius:5px;padding:6px 9px;font-size:11px;color:var(--accent);margin-top:15px;align-self:flex-start}
.blog-empty{background:var(--panel);border:1px solid var(--line);border-radius:19px;display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:25px;padding:55px 65px}
.blog-empty-symbol{font-weight:850;font-size:clamp(90px,12vw,165px);line-height:1;letter-spacing:-.13em;color:var(--bg-3)}
:root[data-theme="light"] .blog-empty-symbol{color:var(--line)}
.blog-empty-symbol span{color:var(--accent)}
.blog-empty-kicker{font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:800}
.blog-empty h3{font-size:clamp(25px,3vw,38px);letter-spacing:-.055em;margin:0 0 13px}
.blog-empty p:not(.blog-empty-kicker){font-size:14px;color:var(--muted);max-width:520px;margin-bottom:22px}
.blog-outro{background:var(--bg-2);border-top:1px solid var(--line-soft);padding:72px 0 87px}
.blog-outro-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.blog-outro-inner p:not(.section-kicker){color:var(--muted);font-size:14px;max-width:570px;margin:18px 0 0}
.blog-article-hero{background:radial-gradient(ellipse at 85% 25%,rgba(146,195,110,.075),transparent 55%);border-bottom:1px solid var(--line);padding-bottom:78px}
.blog-reading-wrap{max-width:920px}
.blog-article-hero .section-kicker{margin-top:82px}
.blog-article-hero h1{font-size:clamp(43px,6vw,76px);letter-spacing:-.07em;line-height:1.09;margin:0 0 30px}
.blog-article-intro{font-size:clamp(19px,2vw,24px);line-height:1.48;color:var(--muted);max-width:780px;margin-bottom:34px}
.blog-article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;color:var(--muted);font-size:12px}
.blog-meta-sep{width:4px;height:4px;border-radius:100%;background:var(--accent)}
.blog-draft-banner{background:var(--accent);color:var(--accent-ink);padding:14px 17px;border-radius:8px;font-size:12px;font-weight:850;margin-top:33px}
.blog-article-body-wrap{display:grid;grid-template-columns:minmax(0,800px) minmax(170px,240px);gap:clamp(28px,5vw,85px);align-items:start;padding-top:62px;padding-bottom:100px}
.blog-article-body{min-width:0;font-size:17px;line-height:1.85;color:var(--text)}
.blog-article-body>*:first-child{margin-top:0}
.prose h2{font-size:clamp(26px,3vw,37px);line-height:1.2;letter-spacing:-.05em;margin:60px 0 18px}
.prose h3{font-size:clamp(21px,2.2vw,26px);margin:39px 0 13px}
.prose p,.prose li{color:var(--text);line-height:1.83}
.prose p{margin:0 0 23px}
.prose ul,.prose ol{padding-left:23px;margin:0 0 28px}
.prose li{margin:9px 0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.prose blockquote{border-left:3px solid var(--accent);margin:36px 0;padding:16px 23px;background:var(--bg-2);border-radius:0 8px 8px 0}
.prose blockquote p{color:var(--text);margin:0}
.prose pre{overflow:auto;max-width:100%;background:#0d171c;color:#dcebe0;border:1px solid #34484b;border-radius:11px;padding:23px;line-height:1.55;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:29px 0 36px}
.prose :not(pre)>code{color:var(--accent);background:var(--bg-2);padding:3px 6px;border-radius:5px;overflow-wrap:anywhere}
.prose pre code{background:none;color:inherit}
.prose img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:30px 0;font-size:14px}
.prose th,.prose td{text-align:left;border-bottom:1px solid var(--line);padding:12px 17px}
.prose th{background:var(--bg-2)}
.blog-article-aside{border-top:1px solid var(--line);padding:22px 0;position:sticky;top:calc(var(--header-h) + 24px);color:var(--muted);font-size:12px}
.blog-article-aside .section-kicker{margin-bottom:19px}
.blog-inline-cta{display:block;font-weight:750;color:var(--accent);margin:16px 0;line-height:1.45}
.blog-bottom-nav{border-top:1px solid var(--line);background:var(--bg-2);padding:40px 0}
.blog-bottom-nav .container{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.blog-bottom-home{font-size:13px;color:var(--muted)}
@media(max-width:980px){.blog-hero-grid{grid-template-columns:1fr;gap:30px;padding:55px 0 77px}.blog-hero-graphic{min-height:310px}.blog-article-body-wrap{grid-template-columns:minmax(0,1fr)}.blog-article-aside{position:static;border-top:1px solid var(--line)}.blog-article-hero .section-kicker{margin-top:60px}}
@media(max-width:680px){.blog-hero h1{font-size:clamp(47px,11.8vw,70px)}.blog-hero-graphic{min-height:300px;padding:22px}.blog-graphic-lines{gap:12px;padding-left:0;transform:none}.blog-graphic-lines span{font-size:12px;padding:13px}.blog-listing{padding:64px 0 80px}.blog-section-top{display:block}.blog-section-top h2{font-size:44px}.blog-section-top>p{margin-top:16px}.blog-post-grid{grid-template-columns:1fr}.blog-teaser,.blog-teaser-featured{grid-column:span 1;padding:27px;min-height:265px}.blog-teaser-featured h3{font-size:32px}.blog-empty{grid-template-columns:1fr;padding:30px;gap:8px}.blog-empty-symbol{font-size:70px}.blog-empty h3{font-size:27px}.blog-outro{padding:60px 0}.blog-outro-inner{align-items:flex-start;flex-direction:column}.blog-article-hero{padding-bottom:55px}.blog-article-hero h1{font-size:clamp(42px,10vw,59px)}.blog-article-intro{font-size:19px}.blog-article-body-wrap{padding-top:39px;padding-bottom:70px}.blog-article-body{font-size:16px}.blog-bottom-nav .container{gap:20px}}