/* Artikelseite im Raster von Entwurf D */
.vd{--bv-accent:#DDEEE5;--va-pad:clamp(1.1rem,3vw,3rem)}
.va-bar{position:fixed;inset:0 0 auto;z-index:90;height:3px;background:#2C7A43;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.va-top{padding:clamp(1rem,3vw,2.5rem) clamp(16px,2.4vw,36px) clamp(1.5rem,3vw,2.5rem)}
.va-crumb{margin:0 0 clamp(1rem,2.5vw,2rem);font-size:1rem}
.va-crumb a{display:inline-block;padding-block:.6rem;color:#1C2A20;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.va-top h1{margin:0;max-width:21ch;font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,6.6vw,7rem);line-height:1.02;letter-spacing:-.028em}
.va-top h1.va-long{max-width:30ch;font-size:clamp(2.1rem,4.6vw,5rem);line-height:1.06}
.va-hero{overflow:hidden;background:var(--bv-accent);max-height:78vh}
.va-hero img{display:block;width:100%;height:100%;object-fit:cover}
.va-intro{display:flex;flex-direction:column;gap:1.2rem;padding:clamp(1rem,1.6vw,1.5rem)}
.va-desc{margin:0 0 auto;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.25;letter-spacing:-.01em}
.va-by{margin:0;font-size:1rem;line-height:1.4}
.va-by a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.va-side{grid-column:span 4;padding:clamp(1rem,1.6vw,1.5rem)}
.va-toc{position:sticky;top:110px;max-height:calc(100vh - 130px);overflow-y:auto}
.va-toc p{margin:0 0 .8rem;font-weight:700}
.va-toc ol{margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.3}
.va-toc li{border-top:1px solid var(--line)}
.va-toc a{display:block;padding:.65rem 0;color:#1C2A20;transition:color .2s ease}
.va-toc a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.va-toc a.is-now{color:var(--green-700);font-weight:700}
.va-body{grid-column:span 8;padding:clamp(1.5rem,4vw,4rem) var(--va-pad);font-family:var(--serif);font-size:clamp(1.15rem,1.35vw,1.28rem);line-height:1.62;color:#1C2A20}
.va-body>*{max-width:40rem}
.va-body p{margin:0 0 1.15em;overflow-wrap:anywhere}
.va-lead::first-letter{float:left;margin:.06em .1em 0 0;font-weight:300;font-size:4.5em;line-height:.8}
.va-body h2{margin:2.4em 0 .7em;font-weight:300;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.va-body h3{margin:1.9em 0 .5em;font-family:var(--sans);font-weight:700;font-size:1.08em;line-height:1.3}
.va-body strong{font-weight:600}
.va-body a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.va-body ul,.va-body ol{margin:0 0 1.5em;padding:0;list-style:none}
.va-body li{padding:.7em 0;border-top:1px solid var(--line)}
.va-body li:last-child{border-bottom:1px solid var(--line)}
.va-body ol{counter-reset:va-step}
.va-body ol>li{display:grid;grid-template-columns:2rem minmax(0,1fr);counter-increment:va-step}
.va-body ol>li::before{content:counter(va-step) ".";font-variant-numeric:tabular-nums}
.va-fig{margin:2.2rem 0}
.va-fig img{display:block;width:100%;height:auto;background:var(--bv-accent)}
.va-mid{display:grid;gap:1rem;margin:3rem 0;padding:1.4rem 0;border-block:1px solid #1C2A20;font-family:var(--sans);font-size:1.05rem;line-height:1.45}
.va-mid p{margin:0}
.va-btn{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:48px;padding:.7rem 1.4rem;background:#2C7A43;color:#fff!important;font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none!important;transition:background-color .2s ease,transform .15s ease}
.va-btn:hover{background:var(--green-700)}
.va-btn:active{transform:scale(.98)}
.va-btn:focus-visible,.va a:focus-visible{outline:2px solid #1C2A20;outline-offset:2px}
.va-body>.va-sum{max-width:none;margin:3.5rem calc(var(--va-pad)*-1);padding:clamp(1.5rem,3vw,3rem) var(--va-pad);background:var(--bv-accent)}
.va-sum>*{max-width:40rem}
.va-sum h2{margin-top:0}
.va-sum li{border-color:#1C2A2033!important}
.va-sum>:last-child{margin-bottom:0}
.va-src{font-family:var(--sans);font-size:.92rem;line-height:1.5}
.va-src h2{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem)}
.va-src p{margin-bottom:.8em}
.va-close{display:grid;gap:1.1rem;margin-top:3rem}
.va-close p{margin:0;font-size:1.25em;line-height:1.35}
.va-close .va-sign{font-size:1em}
.va-note{margin:2.2rem 0 0!important;font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.va-more{margin-top:clamp(3rem,6vw,5rem)}
.va-more h2{margin:0 clamp(16px,2.4vw,36px) 1rem;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.02em}
.va-6{grid-column:span 6}
.va-switch{margin:0 0 clamp(.8rem,2vw,1.4rem);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.8}
.va-switch a{display:inline-block;padding-block:.5rem;color:#1C2A20}
.va-switch a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.va-switch a:not([aria-current]){text-decoration:none}
.va-switch a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (min-width:901px){.va-top,.vd-top{padding-top:112px}}
@media (max-width:900px){
  .va-hero,.va-intro,.va-side,.va-body,.va-6{grid-column:1/-1}
  .va-hero{max-height:none}
  .va-hero img{height:auto;max-height:90vw}
  .va-toc{position:static;max-height:none}
  .va-desc{margin-bottom:.4rem}
  .va-side:empty{display:none}
}
@media (prefers-reduced-motion:reduce){
  .va-bar{display:none}
  .va-btn,.va-toc a{transition:none}
}