.shead{padding:72px 0 56px;border-bottom:1px solid var(--linie)}
.shead h1{max-width:20ch;font-size:56px}
.shead .lead{max-width:44ch;margin-top:20px}
.art{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding:64px var(--pad) 40px}
.toc{position:sticky;top:24px;align-self:start;list-style:none;margin:0;padding:0}
.toc a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--graphit);text-decoration:none;border-bottom:1px solid var(--linie)}
.toc li:first-child a{border-top:1px solid var(--graphit)}
.blk{padding:0 0 64px}.blk h2{font-size:34px;max-width:24ch;margin:12px 0 14px}
.blk > p{max-width:60ch}
.fig{margin:28px 0 0;background:var(--hell);border:1px solid var(--linie);padding:24px}
.fig svg{width:100%;height:auto;display:block}
.fig figcaption{font-size:13px;color:var(--stein);margin-top:10px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.tiles div{background:var(--hell);border:1px solid var(--linie);padding:16px}
.tiles svg{width:100%;height:auto}.tiles h3{font-size:18px;margin:10px 0 0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.pair img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pair span{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--stein);display:block;margin-top:8px}
.demo{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;border-top:1px solid var(--graphit);padding-top:28px}
.demo .ghostcard,.demo img{aspect-ratio:4/3;width:100%;object-fit:cover}
@media (max-width:640px){.shead{padding:40px 0 28px}.shead h1{font-size:32px}.art{grid-template-columns:1fr;gap:24px;padding:32px var(--pad) 16px}.toc{position:static}.blk{padding-bottom:44px}.blk h2{font-size:26px}.tiles{grid-template-columns:1fr 1fr}.pair,.demo{grid-template-columns:1fr}.fig{padding:14px}}
.sh2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hv img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.hv .cap{display:block;font-size:13px;color:var(--stein);margin-top:8px}
@media (max-width:640px){.sh2{grid-template-columns:1fr;gap:28px}.seg{flex-wrap:wrap}}

@media (max-width:900px) and (min-width:641px){.sh2{grid-template-columns:1fr;gap:36px}.sh2 .hv{max-width:560px}}

/* SEO-Runde 22.10 */
.vlabel,.pair span.vlabel{display:block;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--stein);margin-top:8px;line-height:1.45}
.quelle{font-size:14px;color:var(--stein);margin-top:16px;max-width:60ch}
.fakten{margin:16px 0 0;padding-left:1.2em;max-width:60ch}.fakten li{margin:0 0 8px}
.morelinks{margin-top:22px;font-size:15px}

/* Bilder 22.10 08:20: ganzes Haus zeigen, Querformat 16:10 */
.hv img,.art .pair img,.art .demo img{width:100%;height:auto!important;aspect-ratio:16/10!important;object-fit:cover;object-position:50% 55%}
.art .pair>div{display:flex;flex-direction:column}
.art .pair>div>span.vn{order:-1;margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--graphit)}
.vlabel,.pair span.vlabel,.art .pair>div>span.vlabel{font-size:11.5px;line-height:1.35;margin-top:6px;color:var(--stein);opacity:.9}
@media (max-width:768px){.sh2{grid-template-columns:1fr;gap:28px}.sh2 .hv{max-width:none}.art .pair,.art .demo{grid-template-columns:1fr;gap:26px}.art .pair{gap:22px}}


/* Ratgeber (22.10) */
.quellenliste a,.quelle a{overflow-wrap:anywhere;word-break:break-word}.crumbs a{color:inherit}
.fig{background:rgba(0,0,0,.03);padding:18px 20px;margin:18px 0;max-width:60ch}

/* Ratgeber-Grafiken (rg_grafik.py, 22.10.2026) */
.rgfig{margin:40px 0;max-width:720px;container-type:inline-size}
.rgfig .rg-svg{display:block;width:100%;height:auto}
.rgf-g{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.rgpair .rg-svg,.rgf-m .rg-svg{max-width:440px}
.rgstack .rg-svg{max-width:360px}
.rgf-m{display:none}
@container (min-width:680px){.rgpair:not(.rgstack) .rgf-g{grid-template-columns:1fr 1fr;gap:20px}}
@container (max-width:659px){.rgf-d{display:none}.rgf-m{display:block}}
@supports not (container-type:inline-size){@media (max-width:900px){.rgf-d{display:none}.rgf-m{display:block}}}
.rglegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--graphit)}
.rglegend li{display:inline-flex;align-items:center;gap:7px;margin:0}
.rglegend i{width:10px;height:10px;display:inline-block;box-sizing:border-box;flex:none;position:static}
.rglegend .sw-grenze{border:1.5px dashed var(--graphit)}
.rglegend .sw-bestand{background:#E6DFD2;border:1px solid #6E675D}
.rglegend .sw-neu{background:rgba(168,67,42,.12);border:2px solid var(--ziegel)}
.rglegend .sw-flaeche{border:1px dashed var(--stein);background:repeating-linear-gradient(45deg,rgba(110,103,93,.45) 0 .75px,transparent .75px 5px)}
.rglegend .sw-strasse{background:var(--sand)}
.rgfig figcaption{font-size:14px;line-height:1.45;color:var(--stein);margin-top:10px;max-width:60ch}
.rgfig .rgnote{display:block;font-size:13px;margin-top:2px}