/* ==========================================================================
   Wohnico – Stylesheet
   Formensprache: die Dachlinie aus dem Logo, Orange auf Anthrazit, warmes Putzweiß.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
	--orange: #ff6600;
	--orange-hover: #ff7c24;
	--orange-text: #b54500;
	--orange-soft: #fff0e5;
	--orange-line: #ffc49b;
	--ink: #15171a;
	--ink-2: #1d2024;
	--ink-3: #2a2e34;
	--cell: #141c27;
	--cell-2: #1c2735;
	--paper: #f3f0e9;
	--chalk: #fbfaf7;
	--white: #ffffff;
	--stone: #e3ded3;
	--stone-2: #cfc8ba;
	--text: #1b1d21;
	--muted: #5b6067;
	--muted-dark: #a7abb1;
	--line-dark: rgba(255, 255, 255, .12);
	--error: #b42318;
	--ok: #2f6b3a;

	--ff: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ff-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--wrap: 1280px;
	--wrap-wide: 1520px;
	--gutter: clamp(20px, 4.2vw, 56px);
	--sec: clamp(76px, 9.5vw, 148px);
	--head-h: 76px;
	--r: 4px;
	--r-lg: 10px;
	--ease: cubic-bezier(.3, .7, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--shadow: 0 1px 2px rgba(21, 23, 26, .06), 0 12px 32px -12px rgba(21, 23, 26, .18);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); interpolate-size: allow-keywords; }
body { margin: 0; font-family: var(--ff); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.62; color: var(--text); background: var(--paper); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--orange); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange); color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--orange); color: var(--ink); padding: 12px 18px; font-weight: 700; border-radius: var(--r); transition: top .2s; }
.skip:focus { top: 12px; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.flow > * + * { margin-top: 1em; }
.flow > p { margin-bottom: 0; }
.tone-paper { background: var(--paper); }
.tone-chalk { background: var(--chalk); }
.tone-ink { background: var(--ink); color: #e8e5de; }
.tone-ink .sec-intro, .tone-ink p { color: #c9c6bf; }
.tone-ink .sec-title, .tone-ink h3 { color: #fbfaf7; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Typografie ---------- */
.kicker { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 1.1rem; font: 500 .76rem/1.3 var(--ff); color: var(--orange-text); }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--orange); flex: none; transform: translateY(-.5px); }
.kicker a { color: inherit; text-decoration: none; }
.kicker--light, .tone-ink .kicker { color: #ffa466; }
.kicker--dark { color: var(--ink); }
.kicker--dark::before { background: var(--ink); }
.sec-title { font-size: clamp(2.05rem, 1.15rem + 3.1vw, 3.85rem); font-weight: 780; font-stretch: 76%; line-height: 1; letter-spacing: -.012em; color: var(--ink); }
.sec-intro { margin-top: 1.25rem; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 76px); }
.sec-head--split { max-width: none; display: grid; gap: 1.25rem 4rem; align-items: end; }
@media (min-width: 960px) {
	.sec-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
	.sec-head--split .kicker { grid-column: 1 / -1; margin-bottom: -0.25rem; }
	.sec-head--split .sec-intro { margin: 0; padding-bottom: .35rem; }
}
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; }
.link-arrow .ico { transition: transform .3s var(--ease); }
.link-arrow:hover .ico { transform: translateX(4px); }
.linkbtn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; color: inherit; font-weight: 600; }

/* Dachlinie */
.roofline { overflow: visible; pointer-events: none; }
.roofline path { fill: none; stroke: var(--orange); stroke-width: 3.4; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-linejoin: miter; }
.js .roofline { clip-path: inset(-40% 100% -40% 0); transition: clip-path 1.15s var(--ease-out) .2s; }
.js .roofline.is-in, .js .is-in .roofline { clip-path: inset(-40% -6% -40% 0); }
.js .hero .roofline { transition-delay: .6s; transition-duration: 1.3s; }
.roofword { position: relative; display: inline-block; font-style: normal; color: var(--orange); white-space: nowrap; }
.tone-paper .roofword, .tone-chalk .roofword, .sec--wege .roofword, .page-plain .roofword { color: var(--orange-text); }
.roofword .roofline--word { position: absolute; left: -.06em; right: -.18em; top: -.36em; width: calc(100% + .24em); height: .38em; }
.roofline--cta, .roofline--quote, .roofline--thanks { display: block; width: min(320px, 70%); height: 40px; margin-bottom: 1.6rem; }

/* ---------- Buttons ---------- */
.btn { --bg: var(--ink); --fg: var(--chalk); --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: 52px; padding: .9em 1.35em; font: 680 1rem/1.1 var(--ff); font-stretch: 90%; letter-spacing: .005em; text-decoration: none; color: var(--fg); background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn__ico { width: 1.15em; height: 1.15em; transition: transform .35s var(--ease); }
.btn:hover .btn__ico:not(.btn__ico--l) { transform: translateX(4px); }
.btn:hover .btn__ico--l { transform: translateX(-4px); }
.btn--primary { --bg: var(--orange); --fg: var(--ink); }
.btn--primary:hover { --bg: var(--orange-hover); }
.btn--dark { --bg: var(--ink); --fg: var(--chalk); }
.btn--dark:hover { --bg: var(--ink-3); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: rgba(21, 23, 26, .35); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--chalk); --bd: var(--ink); }
.btn--ghost-light { --bg: rgba(21, 23, 26, .15); --fg: #fff; --bd: rgba(255, 255, 255, .5); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--sm { min-height: 42px; padding: .6em 1em; font-size: .94rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.actions--center { justify-content: center; }
.iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--stone-2); background: var(--white); border-radius: var(--r); color: var(--ink); }
.iconbtn:hover:not([disabled]) { border-color: var(--ink); }
.iconbtn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Kopfzeile ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--head-h); color: var(--ink); transition: transform .45s var(--ease), background-color .3s, box-shadow .3s, color .3s; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.brand { display: block; flex: none; color: var(--orange); }
.brand__logo { width: clamp(132px, 11vw, 158px); height: auto; fill: currentColor; }
.has-hero .site-header:not(.is-solid) { color: #fff; }
.has-hero .site-header:not(.is-solid)::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(rgba(12, 13, 15, .55), rgba(12, 13, 15, 0)); pointer-events: none; z-index: -1; }
.site-header.is-solid, body:not(.has-hero) .site-header { background: var(--paper); box-shadow: 0 1px 0 rgba(21, 23, 26, .08); color: var(--ink); }
.site-header.is-hidden { transform: translateY(-100%); }
body:not(.has-hero) .site-main { padding-top: var(--head-h); }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { display: block; padding: .6rem .8rem; font-weight: 600; font-size: .98rem; font-stretch: 92%; text-decoration: none; border-radius: var(--r); position: relative; }
.nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__item:hover > .nav__link::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__toggle { display: none; background: none; border: 0; padding: .4rem; margin-left: -.5rem; }
.nav__toggle .ico { width: 1rem; height: 1rem; transition: transform .3s; }
.nav__sub { position: absolute; top: calc(100% + 6px); left: -.5rem; min-width: 290px; padding: .5rem; background: var(--chalk); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px rgba(21, 23, 26, .06); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.nav__sub::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav__item.has-sub:hover > .nav__sub, .nav__item.has-sub:focus-within > .nav__sub, .nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub .nav__link { padding: .65rem .8rem; font-size: .96rem; font-weight: 550; }
.nav__sub .nav__link::after { display: none; }
.nav__sub .nav__link:hover { background: var(--paper); }
.nav__sub .nav__item.is-current .nav__link { color: var(--orange-text); }
.nav__mobile-extra { display: none; }
.site-header__cta { display: flex; align-items: center; gap: 1rem; margin-left: 1rem; }
.site-header__phone { display: inline-flex; align-items: center; gap: .45rem; font: 500 .9rem/1 var(--ff); text-decoration: none; white-space: nowrap; }
.site-header__phone .ico { color: var(--orange); }
.burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; border-radius: var(--r); position: relative; }
.burger__lines, .burger__lines::before, .burger__lines::after { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.burger__lines { top: 50%; margin-top: -1px; }
.burger__lines::before, .burger__lines::after { content: ""; left: 0; right: 0; }
.burger__lines::before { top: -7px; }
.burger__lines::after { top: 7px; }
.nav-open .burger__lines { background: transparent; }
.nav-open .burger__lines::before { transform: translateY(7px) rotate(45deg); }
.nav-open .burger__lines::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
	.site-header__phone span { display: none; }
}
@media (max-width: 1080px) {
	.burger { display: block; }
	.site-header__cta { margin-left: auto; }
	.site-header__phone { display: none; }
	.nav { position: fixed; inset: 0; z-index: -1; margin: 0; padding: calc(var(--head-h) + 1rem) var(--gutter) 2rem; background: var(--ink); color: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
	.nav-open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.nav-open .site-header { color: #fff !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
	.nav-open .site-header::before { display: none; }
	.nav-open { overflow: hidden; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line-dark); }
	.nav__link { flex: 1; padding: 1.05rem 0; font-size: 1.45rem; font-stretch: 80%; font-weight: 700; }
	.nav__link::after { display: none; }
	.nav__toggle { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; color: #fff; }
	.nav__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
	.nav__sub { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 .8rem; background: none; color: #d8d5ce; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.nav__item.is-open > .nav__sub { display: block; }
	.nav__item.has-sub:hover > .nav__sub { display: none; }
	.nav__item.has-sub.is-open:hover > .nav__sub { display: block; }
	.nav__sub .nav__link { font-size: 1.05rem; font-weight: 500; font-stretch: 100%; padding: .6rem 0 .6rem 1rem; }
	.nav__sub .nav__link:hover { background: none; color: var(--orange); }
	.nav__item { flex-wrap: wrap; }
	.nav__mobile-extra { display: grid; gap: 1.2rem; margin-top: 2rem; }
	.nav__mobile-extra p { display: flex; align-items: center; gap: .6rem; font: 500 1.05rem var(--ff); }
	.nav__mobile-extra a { color: #fff; }
	.site-header__cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(88svh, 860px); padding: calc(var(--head-h) + 48px) 0 clamp(48px, 7vw, 96px); color: #fff; background: var(--ink); overflow: hidden; }
.hero--home { min-height: min(100svh, 980px); }
.hero--slim { min-height: 0; padding-top: calc(var(--head-h) + clamp(48px, 7vw, 96px)); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.js .hero__media img { animation: heroIn 2.2s var(--ease-out) both; }
@keyframes heroIn { from { transform: scale(1.07); filter: saturate(.7) brightness(.8); } to { transform: none; filter: none; } }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 14, 16, .78) 0%, rgba(13, 14, 16, .45) 42%, rgba(13, 14, 16, 0) 72%), linear-gradient(0deg, rgba(13, 14, 16, .82) 0%, rgba(13, 14, 16, .25) 42%, rgba(13, 14, 16, 0) 62%); }
.hero__inner { position: relative; display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 1100px) { .hero__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.hero__content { max-width: 860px; }
.hero__title { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.25rem); font-weight: 800; font-stretch: 70%; line-height: .94; letter-spacing: -.015em; color: #fff; }
.hero__title--xl { font-size: clamp(3rem, 1.4rem + 5.4vw, 6rem); }
.hero__lead { margin-top: 1.6rem; max-width: 56ch; font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.hero__facts { display: grid; gap: .65rem; padding: 1.25rem 1.4rem; background: none; padding: 0; font-size: .98rem; max-width: 380px; }
.hero__facts li { display: flex; gap: .65rem; align-items: flex-start; }
.hero__facts .ico { color: var(--orange); margin-top: .15em; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero__scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; color: rgba(255, 255, 255, .7); padding: 8px; animation: bob 2.6s ease-in-out infinite; }
.hero__scroll .ico { width: 26px; height: 26px; }
@keyframes bob { 50% { transform: translateY(6px); } }
.hero__mark { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__mark-line { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease-out) 1.4s forwards; }
.hero__mark-dot { fill: var(--orange); stroke: #fff; stroke-width: 3; opacity: 0; animation: pop .5s var(--ease-out) 2.5s forwards; transform-box: fill-box; transform-origin: center; }
.hero__mark-tag { opacity: 0; animation: fadeIn .8s var(--ease) 1.1s forwards; }
.hero__mark-tag rect { fill: rgba(13, 14, 16, .55); stroke: rgba(255, 255, 255, .35); }
.hero__mark-tag text { fill: #fff; font: 500 20px var(--ff); letter-spacing: .04em; }
.hero__mark-tag .t2 { fill: #ffb27f; font-size: 18px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
@media (max-width: 899px) { .hero__mark { display: none; } }

.sunchip { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.4rem; padding: .5rem .9rem .5rem .75rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; background: rgba(13, 14, 16, .35); font: 500 .8rem/1.2 var(--ff); letter-spacing: .03em; color: rgba(255, 255, 255, .92); }
.sunchip[hidden], .site-footer__sun[hidden] { display: none; }
.sunchip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 102, 0, .6); animation: glow 2.8s ease-out infinite; flex: none; }
.is-night .sunchip__dot { background: #8ea3c0; animation: none; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 102, 0, 0); } }

/* Seitenkopf schlicht */
.pagehead { padding: calc(var(--head-h) + clamp(40px, 6vw, 88px)) 0 clamp(40px, 5vw, 72px); background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.pagehead .hero__title { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5rem); }

/* ---------- Abschnitte allgemein ---------- */
.sec { padding-block: var(--sec); position: relative; }
.frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--stone); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Split */
.split { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; }
@media (min-width: 960px) {
	.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.split--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.split--rev .split__media { order: -1; }
}
.split__text .sec-title { margin-bottom: 1.5rem; }
.split__text .flow { color: var(--muted); font-size: 1.06rem; max-width: 58ch; }
.split__media .frame { aspect-ratio: 4 / 3; }
.split__media figcaption { margin-top: .75rem; font: 400 .78rem/1.4 var(--ff); color: var(--muted); letter-spacing: .02em; }
.ticks { display: grid; gap: .8rem; margin-top: 1.8rem; }
.ticks li { display: flex; gap: .8rem; align-items: flex-start; font-weight: 550; }
.ticks .ico { flex: none; width: 22px; height: 22px; padding: 3px; margin-top: 1px; color: var(--ink); background: var(--orange); border-radius: 2px; stroke-width: 2.4; }

/* Benefits */
.benefits { display: grid; gap: 2rem clamp(40px, 6vw, 110px); }
@media (min-width: 1000px) {
	.benefits { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
	.benefits__head { position: sticky; top: calc(var(--head-h) + 40px); margin-bottom: 0; }
}
.benefits__grid { display: grid; gap: 0 clamp(28px, 4vw, 56px); }
@media (min-width: 640px) { .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefit { padding: 1.8rem 0 2rem; border-top: 1.5px solid var(--stone-2); }
.benefit__ico { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1.1rem; border: 1.5px solid var(--ink); border-radius: var(--r); color: var(--ink); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s; }
.benefit__ico .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.benefit:hover .benefit__ico { background: var(--orange); border-color: var(--orange); }
.benefit__title { font-size: 1.28rem; font-stretch: 88%; font-weight: 720; margin-bottom: .5rem; color: var(--ink); }
.benefit p { color: var(--muted); }

/* Steps */
.steps { display: grid; gap: 3rem clamp(40px, 6vw, 110px); }
@media (min-width: 1000px) {
	.steps { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
	.steps__aside { position: sticky; top: calc(var(--head-h) + 40px); }
}
.steps__note { display: flex; gap: .7rem; align-items: flex-start; max-width: 40ch; font-size: .92rem; color: var(--muted-dark) !important; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }
.steps__note .ico { color: var(--orange); margin-top: .15em; }
.steps__list { position: relative; counter-reset: s; }
.steps__list::before, .steps__list::after { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--line-dark); }
.steps__list::after { background: var(--orange); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.4rem; padding-bottom: clamp(28px, 3.5vw, 48px); }
.step:last-child { padding-bottom: 0; }
.step__no { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink-3); font: 500 .95rem var(--ff); color: #fff; transition: border-color .4s, background-color .4s, color .4s; }
.step.is-passed .step__no { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.step__title { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-stretch: 85%; font-weight: 720; margin: .7rem 0 .45rem; }
.step p { max-width: 56ch; }

/* Vergleich */
.compare { overflow-x: auto; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--stone); -webkit-overflow-scrolling: touch; }
.compare table { width: 100%; min-width: calc(220px + var(--cols) * 190px); border-collapse: collapse; }
.compare th, .compare td { padding: 1.05rem 1.3rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stone); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { vertical-align: bottom; padding-top: 1.6rem; border-bottom: 2px solid var(--ink); }
.compare thead td { border-bottom: 2px solid var(--ink); }
.compare__title { display: block; font-size: 1.3rem; font-stretch: 82%; font-weight: 760; color: var(--ink); }
.compare__sub { display: block; margin-top: .25rem; font: 400 .78rem/1.35 var(--ff); color: var(--muted); }
.compare tbody th { width: 26%; font-weight: 620; color: var(--ink); position: sticky; left: 0; background: var(--white); }
.compare td { color: var(--muted); }
.compare .is-hl { background: var(--orange-soft); }
.compare thead .is-hl .compare__title { color: var(--orange-text); }
.compare .yes .ico { width: 26px; height: 26px; padding: 4px; color: var(--ink); background: var(--orange); border-radius: 50%; stroke-width: 2.6; }
.compare .no .ico { width: 22px; height: 22px; color: var(--stone-2); stroke-width: 2.4; }

/* Checkliste */
.checklist { display: grid; gap: 0 clamp(32px, 5vw, 80px); counter-reset: c; }
@media (min-width: 760px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist__item { display: grid; gap: .5rem; padding: 1.8rem 0 2rem; border-top: 2px solid var(--ink); }
.checklist__item h3 { font-size: 1.32rem; font-stretch: 86%; font-weight: 720; color: var(--ink); align-self: center; }
.checklist__item p { color: var(--muted); }

/* Zitat */
.quote { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .quote { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.quote__media .frame { aspect-ratio: 4 / 5; max-width: 460px; }
.quote__body { margin: 0; }
.quote__text { font-size: clamp(1.55rem, 1rem + 2.1vw, 2.7rem); font-stretch: 86%; font-weight: 520; line-height: 1.2; letter-spacing: -.008em; color: #fbfaf7 !important; text-wrap: pretty; }
.quote__text::before { content: "„"; }
.quote__text::after { content: "“"; }
.quote__body footer { display: grid; gap: .2rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-dark); }
.quote__body footer strong { font-size: 1.1rem; color: #fff; }
.quote__body footer span { font: 400 .82rem var(--ff); color: var(--muted-dark); }

/* Fakten */
.sec--facts { padding-block: clamp(48px, 6vw, 84px); background: var(--orange); color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem 0; }
.fact { display: grid; gap: .5rem; padding: 0 clamp(16px, 2.5vw, 36px); border-left: 1.5px solid rgba(21, 23, 26, .22); }
.fact__value { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem); font-weight: 800; font-stretch: 68%; line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fact__label { font-size: .98rem; line-height: 1.4; max-width: 26ch; }

/* FAQ */
.faq { display: grid; gap: 2rem clamp(40px, 6vw, 110px); }
@media (min-width: 1000px) {
	.faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
	.faq__head { position: sticky; top: calc(var(--head-h) + 40px); margin-bottom: 0; }
}
.faq__item { border-bottom: 1px solid var(--stone-2); }
.faq__item:first-child { border-top: 1px solid var(--stone-2); }
.faq__item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); font-weight: 650; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--orange-text); }
.faq__ico { flex: none; width: 30px; height: 30px; padding: 5px; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .35s var(--ease), background-color .3s; margin-top: -.1em; }
.faq__item[open] .faq__ico { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--ink); }
.faq__a { padding: 0 3.5rem 1.6rem 0; color: var(--muted); }
.faq__a a { color: var(--orange-text); }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }

/* Karten */
.cards { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--stone); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.tone-chalk .card__link { background: var(--paper); }
.card__link:hover { box-shadow: 0 0 0 1px var(--stone-2), var(--shadow); transform: translateY(-3px); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.card__link:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.card__title { font-size: 1.4rem; font-stretch: 84%; font-weight: 740; color: var(--ink); margin-bottom: .6rem; }
.card__body p { color: var(--muted); flex: 1; }
.card__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-weight: 680; color: var(--ink); }
.card__more .ico { color: var(--orange); transition: transform .3s var(--ease); }
.card__link:hover .card__more .ico { transform: translateX(4px); }

/* Fließtext */
.prose { font-size: 1.08rem; color: #3a3d42; }
.sec--prose .sec-title { margin-bottom: 1.6rem; }
.prose h3 { font-size: 1.35rem; font-stretch: 86%; margin-top: 2rem; color: var(--ink); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--orange); }
.prose a, .entry a { color: var(--orange-text); }

/* CTA-Band */
.sec--cta { overflow: hidden; isolation: isolate; }
.cta--dark { background: var(--ink); color: #fff; }
.cta--orange { background: var(--orange); color: var(--ink); }
.cta--orange .roofline path { stroke: var(--ink); }
.cta--orange .roofword { color: var(--ink); }
.cta--image { color: #fff; background: var(--ink); }
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 14, 16, .88), rgba(13, 14, 16, .5)); }
.cta__title { font-size: clamp(2.3rem, 1.2rem + 4vw, 4.8rem); font-weight: 800; font-stretch: 70%; line-height: .98; max-width: 18ch; }
.cta__text { margin-top: 1.2rem; max-width: 52ch; font-size: 1.15rem; opacity: .88; }
.cta__phone { display: flex; align-items: center; gap: .55rem; margin-top: 1.6rem; font-size: .95rem; opacity: .85; }
.cta__phone a { font-family: var(--ff); font-weight: 500; }
.cta--dark .cta__phone .ico, .cta--image .cta__phone .ico { color: var(--orange); }

/* ---------- Vier Wege (Startseite) ---------- */
.wege { display: grid; gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 900px) {
	.wege { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.weg--1 { grid-column: 1 / span 7; }
	.weg--2 { grid-column: 8 / span 5; }
	.weg--3 { grid-column: 1 / span 5; }
	.weg--4 { grid-column: 6 / span 7; }
	.weg--1 .weg__link, .weg--2 .weg__link { min-height: clamp(440px, 40vw, 580px); }
	.weg--3 .weg__link, .weg--4 .weg__link { min-height: clamp(380px, 32vw, 470px); }
}
.weg__link { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: clamp(22px, 2.6vw, 38px); color: #fff; text-decoration: none; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.weg__media { position: absolute; inset: 0; z-index: -1; }
.weg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.weg__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 14, 16, .9) 0%, rgba(13, 14, 16, .55) 38%, rgba(13, 14, 16, .05) 70%); transition: opacity .5s; }
.weg__link:hover .weg__media img { transform: scale(1.05); }
.weg__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.weg__link:hover::after, .weg__link:focus-visible::after { transform: scaleX(1); }
.weg__title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.7rem); font-weight: 800; font-stretch: 74%; line-height: 1; max-width: 16ch; color: #fff; }
.weg--1 .weg__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.weg__text { margin: .9rem 0 0; max-width: 42ch; color: rgba(255, 255, 255, .84); }
.weg__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; font-weight: 680; color: #fff; }
.weg__more .ico { color: var(--orange); transition: transform .35s var(--ease); }
.weg__link:hover .weg__more .ico { transform: translate(3px, -3px); }

/* ---------- Dachpacht-Illustration ---------- */
.model__stage { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 980px) { .model__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ill { width: 100%; height: auto; overflow: visible; }
.ill__ground { stroke: var(--stone-2); stroke-width: 2; }
.ill__wall, .ill__door, .ill__gate { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ill__gate { stroke-width: 1.4; stroke: var(--muted); }
.ill__roof { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linejoin: miter; stroke-dasharray: 1; }
.ill__mod { fill: var(--cell-2); stroke: #3a4a62; stroke-width: 1; }
.ill__sun circle { fill: none; stroke: var(--orange); stroke-width: 2.5; }
.ill__rays line { stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.ill__rays { transform-origin: 86px 74px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ill__flow { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 1; }
.ill__badge rect { fill: var(--ink); }
.ill__badge text { fill: #fff; font: 600 15px var(--ff); text-anchor: middle; }
.ill__badge--b rect { fill: var(--orange); }
.ill__badge--b text { fill: var(--ink); }
.js .ill__roof { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
.js .ill__mod { opacity: 0; transform: translateY(-14px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.9s + var(--k) * .12s); }
.js .ill__flow { stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) 2s; }
.js .ill__flow--b { transition-delay: 2.25s; }
.js .ill__badge { opacity: 0; transition: opacity .5s 2.7s; }
.js .ill__badge--b { transition-delay: 2.95s; }
.js .is-in .ill__roof, .js .is-in .ill__flow { stroke-dashoffset: 0; }
.js .is-in .ill__mod { opacity: 1; transform: none; }
.js .is-in .ill__badge { opacity: 1; }
.model__legend { display: grid; gap: 1.6rem; counter-reset: m; }
.model__legend li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; }
.model__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); font: 500 .95rem var(--ff); }
.model__legend h3 { font-size: 1.25rem; font-stretch: 86%; font-weight: 720; margin: .45rem 0 .35rem; color: var(--ink); }
.model__legend p { color: var(--muted); }
.model__actions { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Modul-Explosionszeichnung ---------- */
.sec--module { background: var(--cell); color: #dfe5ee; }
.sec--module .sec-title, .sec--module h3, .sec--module strong { color: #fff; }
.sec--module .sec-intro, .sec--module p { color: #b9c3d0; }
.module { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 1000px) { .module { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.module__args { display: grid; gap: 1.3rem; margin-top: 2.2rem; }
.module__args li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1rem; }
.module__args .ico { width: 26px; height: 26px; color: var(--orange); }
.module__args strong { display: block; font-size: 1.08rem; margin-bottom: .15rem; }
.module__args span { color: #aeb9c8; font-size: .98rem; }
.explode { width: 100%; overflow: visible; --gap: calc(8px + 50px * var(--x, 0)); }
.layer { transform: translateY(calc(18px + var(--n) * var(--gap))); transition: transform .15s linear; }
.layer polygon { stroke-width: 1.2; }
.layer--glass polygon { fill: rgba(190, 214, 235, .16); stroke: rgba(225, 238, 250, .75); }
.layer--eva polygon { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 4; }
.layer--cells polygon { fill: #142338; stroke: #4d6788; }
.layer__grid line { stroke: rgba(130, 165, 210, .45); stroke-width: .8; }
.layer--back polygon { fill: #2b3037; stroke: #66707c; }
.layer--frame polygon { fill: none; stroke: #c2c8cf; stroke-width: 4; }
.layer__label { opacity: calc((var(--x, 0) - .35) * 2.2); transition: opacity .2s linear; }
.layer__label line { stroke: var(--orange); stroke-width: 1.2; }
.layer__label text { fill: #fff; font: 500 13px var(--ff); letter-spacing: .04em; }
.module__notes { display: grid; gap: .55rem 2rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .92rem; color: #aeb9c8; }
@media (min-width: 640px) { .module__notes { grid-template-columns: 1fr 1fr; } }
.module__notes strong { color: #fff; font-weight: 650; }

/* ---------- Projekte (Tabs) ---------- */
.projects__tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.projects__tab { display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.15rem; border: 1.5px solid var(--stone-2); background: transparent; border-radius: var(--r); font-weight: 650; transition: all .25s var(--ease); }
.projects__tab:hover { border-color: var(--ink); }
.projects__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.project { display: grid; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
@media (min-width: 980px) { .project { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.project.is-active { animation: projIn .7s var(--ease-out); }
@keyframes projIn { from { opacity: 0; } to { opacity: 1; } }
.project.is-active .project__media img { animation: projImg 1.2s var(--ease-out); }
@keyframes projImg { from { transform: scale(1.04); } to { transform: none; } }
.project__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__badge { position: absolute; top: 14px; left: 14px; padding: .35rem .6rem; background: rgba(13, 14, 16, .6); color: #fff; font: 500 .7rem var(--ff); border-radius: 2px; }
.project__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-stretch: 78%; font-weight: 780; color: var(--ink); margin-bottom: 1rem; line-height: 1.02; }
.project__body > p { color: var(--muted); }
.project__specs { display: grid; gap: 0; margin: 1.6rem 0 1.8rem; }
.project__specs div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--stone-2); }
.project__specs dt { font: 500 .75rem/1.6 var(--ff); color: var(--muted); }
.project__specs dd { margin: 0; font-weight: 580; }

/* ---------- Ratgeber-Karten ---------- */
.posts { display: grid; gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card__link { display: block; text-decoration: none; }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--stone); margin-bottom: 1.1rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.post-card__link:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta { margin: 0 0 .45rem; font: 500 .74rem var(--ff); color: var(--orange-text); }
.post-card__title { font-size: 1.38rem; font-stretch: 84%; font-weight: 740; color: var(--ink); line-height: 1.12; }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.post-card__excerpt { margin-top: .6rem; color: var(--muted); font-size: .98rem; }
.posts__all { margin-top: 2.5rem; }
@media (min-width: 1080px) {
	.posts--archive .post-card--lead { grid-column: 1 / -1; }
	.posts--archive .post-card--lead .post-card__link { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: center; }
	.posts--archive .post-card--lead .post-card__media { margin: 0; }
	.posts--archive .post-card--lead .post-card__title { font-size: 2.4rem; }
}

/* ---------- Empfehlung ---------- */
.sec--referral { background: var(--orange); color: var(--ink); overflow: hidden; }
.sec--referral .sec-title { color: var(--ink); }
.sec--referral .roofword { color: var(--ink); }
.sec--referral .roofline path { stroke: var(--ink); }
.referral { display: grid; gap: clamp(36px, 5vw, 88px); align-items: center; }
@media (min-width: 960px) { .referral { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.referral__lead { margin-top: 1.4rem; font-size: 1.18rem; max-width: 50ch; }
.referral__steps { display: grid; gap: .7rem; margin: 1.8rem 0 1.2rem; }
.referral__steps li { display: flex; align-items: center; gap: .9rem; font-weight: 600; }
.referral__steps span { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ink); color: var(--orange); font: 500 .85rem var(--ff); }
.referral__small { font-size: .88rem; opacity: .78; max-width: 56ch; }
.referral__media { position: relative; margin: 0; }
.referral__media .frame { aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -30px rgba(21, 23, 26, .6); }

/* ---------- Dach-Check-Teaser ---------- */
.dcheck { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .dcheck { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.dcheck__points { display: grid; gap: .8rem; margin-top: 1.8rem; }
.dcheck__points li { display: flex; gap: .8rem; align-items: center; color: #d6d3cc; }
.dcheck__points .ico { color: var(--orange); }
.dcheck__demo { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: #2a2e34; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dcheck__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.dcheck__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dcheck__poly { fill: rgba(255, 102, 0, 0); stroke: var(--orange); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; transition: stroke-dashoffset 1.8s var(--ease) .6s, fill .8s 2.3s; }
.dcheck__pins circle { fill: #fff; stroke: var(--orange); stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .3s, transform .45s var(--ease-out); transition-delay: calc(.25s + var(--k) * .45s); }
.dcheck__demo.is-in .dcheck__poly { stroke-dashoffset: 0; fill: rgba(255, 102, 0, .22); }
.dcheck__demo.is-in .dcheck__pins circle { opacity: 1; transform: none; }
.dcheck__readout { position: absolute; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); display: grid; gap: .15rem; padding: .9rem 1.1rem 1rem; background: var(--ink); border-radius: var(--r); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .6s 2.2s, transform .6s var(--ease-out) 2.2s; }
.dcheck__demo.is-in .dcheck__readout { opacity: 1; transform: none; }
.dcheck__label { font: 500 .7rem var(--ff); color: #ffa466; }
.dcheck__value { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; font-stretch: 70%; line-height: 1; font-variant-numeric: tabular-nums; }
.dcheck__hint { font-size: .8rem; color: #bdbab3; }

/* ---------- Dach-Check-Werkzeug ---------- */
.sec--tool { padding-block: clamp(20px, 3vw, 40px) var(--sec); background: var(--paper); }
.tool { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) { .tool { grid-template-columns: minmax(0, 1fr) 440px; } }
.tool__map { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--stone-2); }
@media (min-width: 1100px) { .tool__map { position: sticky; top: calc(var(--head-h) + 16px); } }
.tool__bar { display: flex; flex-wrap: wrap; gap: .6rem; padding: .7rem; background: var(--chalk); border-bottom: 1px solid var(--stone); }
.tool__search { position: relative; flex: 1 1 320px; display: flex; gap: .5rem; align-items: center; }
.tool__search > .ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.tool__search input { flex: 1; height: 44px; padding: 0 .9rem 0 2.6rem; border: 1.5px solid var(--stone-2); border-radius: var(--r); font: inherit; background: var(--white); min-width: 0; }
.tool__search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 102, 0, .25); }
.tool__actions { display: flex; gap: .5rem; }
.tool__canvas { position: relative; height: clamp(420px, 70vh, 720px); }
.tool__canvas .leaflet-container { height: 100%; width: 100%; font: inherit; background: #1e2226; cursor: crosshair; }
.tool__consent { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; padding: 1.5rem; }
.tool__consent-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.5) saturate(.8); transform: scale(1.04); }
.tool__consent-box { position: relative; max-width: 460px; padding: 2rem; background: var(--chalk); border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: left; }
.tool__consent-box h2 { font-size: 1.8rem; font-stretch: 78%; font-weight: 780; margin: .8rem 0 .6rem; }
.tool__consent-box p { color: var(--muted); font-size: .95rem; }
.tool__consent-box .btn { margin-top: 1.2rem; }
.tool__consent-box .linkbtn { display: block; margin-top: 1rem; font-size: .92rem; color: var(--muted); }
.tool__consent-ico { width: 40px; height: 40px; color: var(--orange); }
.tool__help { position: absolute; z-index: 450; left: 50%; top: 14px; translate: -50% 0; display: flex; align-items: center; gap: .6rem; max-width: calc(100% - 28px); margin: 0; padding: .6rem .9rem; background: rgba(13, 14, 16, .85); color: #fff; font-size: .88rem; border-radius: var(--r); box-shadow: var(--shadow); pointer-events: none; }
.tool__help .ico { color: var(--orange); flex: none; }
.tool__panel { display: grid; gap: 1.2rem; }
.tool__readout { padding: 1.5rem 1.6rem; background: var(--ink); color: #fff; border-radius: var(--r-lg); }
.tool__area { margin: 0; font-size: clamp(2.8rem, 2rem + 2vw, 3.8rem); font-weight: 800; font-stretch: 66%; line-height: 1; font-variant-numeric: tabular-nums; }
.tool__area small { font-size: 1.4rem; font-weight: 600; color: #bdbab3; }
.tool__kwp { margin: .7rem 0 0; color: #c9c6bf; font-size: .95rem; }
.tool__verdict { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line-dark); font-weight: 600; color: #fff; }
.tool__verdict:empty { display: none; }
.lead--dachcheck { padding: 1.6rem; background: var(--chalk); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone); }
.lead--dachcheck .fields { grid-template-columns: 1fr; }
.wn-vertex { width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important; background: #fff; border: 3px solid var(--orange); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: grab; }
.wn-vertex--first { background: var(--orange); border-color: #fff; }
.wn-area-label { background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 3px !important; font: 600 13px var(--ff) !important; padding: 4px 8px !important; box-shadow: none !important; }
.wn-area-label::before { display: none; }
.leaflet-control-attribution { font-size: 10px !important; }

/* ---------- Formulare ---------- */
.formsec { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) {
	.formsec { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
	.formsec__aside { position: sticky; top: calc(var(--head-h) + 40px); }
}
.formsec__form, .contact__form { padding: clamp(22px, 3.2vw, 44px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone), var(--shadow); }
.person { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--stone-2); }
.person__img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; background: var(--stone); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person--lg .person__img { width: 96px; height: 96px; }
.person__txt { display: grid; gap: .1rem; }
.person__txt strong { font-size: 1.08rem; color: var(--ink); }
.person__txt span { color: var(--muted); font-size: .92rem; }
.person__tel { margin-top: .35rem; font: 500 1rem var(--ff); color: var(--ink); }
.lead { position: relative; }
.lead__title { font-size: 1.6rem; font-stretch: 80%; font-weight: 760; margin-bottom: 1.4rem; }
.lead__group { font-size: 1.1rem; font-weight: 700; margin: 1.8rem 0 .9rem; color: var(--ink); }
.lead__group:first-of-type { margin-top: 0; }
.lead__legend { padding: 0; margin-bottom: 1.3rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-stretch: 80%; font-weight: 760; color: var(--ink); }
.lead__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead__step:not([hidden]) { animation: stepIn .5s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.lead__chosen { margin: -.4rem 0 1.3rem; font-size: .95rem; color: var(--muted); }
.lead__chosen strong { color: var(--ink); }
.lead__progress { display: flex; gap: .5rem; margin-bottom: 1.8rem; counter-reset: p; }
.lead__progress li { flex: 1; display: flex; align-items: center; gap: .55rem; padding-bottom: .7rem; border-bottom: 3px solid var(--stone); font: 500 .78rem var(--ff); color: var(--muted); transition: border-color .3s, color .3s; }
.lead__progress li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--stone); color: var(--ink); font-size: .75rem; transition: background-color .3s; }
.lead__progress li.is-current { border-color: var(--orange); color: var(--ink); }
.lead__progress li.is-current span { background: var(--orange); }
.lead__progress li.is-done { border-color: var(--ink); color: var(--ink); }
.lead__progress li.is-done span { background: var(--ink); color: #fff; }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.topic { position: relative; display: block; cursor: pointer; }
.topic input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.topic__box { display: grid; gap: .3rem; height: 100%; padding: 1.1rem 1.1rem 1.2rem; border: 1.5px solid var(--stone-2); border-radius: var(--r); background: var(--chalk); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.topic__box .ico { width: 28px; height: 28px; margin-bottom: .45rem; color: var(--ink); stroke-width: 1.6; transition: color .2s; }
.topic__box strong { font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.topic__box small { font-size: .84rem; color: var(--muted); }
.topic:hover .topic__box { border-color: var(--ink); }
.topic input:checked + .topic__box { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
.topic input:checked + .topic__box .ico { color: var(--orange-text); }
.topic input:focus-visible + .topic__box { outline: 2.5px solid var(--orange); outline-offset: 2px; }
.fields { display: grid; gap: 1.1rem 1rem; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields--single { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: .9rem; font-weight: 650; color: var(--ink); }
.field__label .opt { font-weight: 400; font-size: .78rem; color: var(--muted); margin-left: .2rem; }
.req { color: var(--orange-text); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: .75rem .9rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1.5px solid var(--stone-2); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.field textarea { resize: vertical; min-height: 96px; }
.field--select select { padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a9a294; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 102, 0, .28); }
.field input::placeholder, .field textarea::placeholder { color: #9b9a95; }
.field__hint { font-size: .8rem; color: var(--muted); }
.field__error { font-size: .84rem; color: var(--error); font-weight: 600; }
.field__error:empty { display: none; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--error); }
.fields__note { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }
.chips { border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; }
.chips legend { margin-bottom: .55rem; }
.chips__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips__row--stack { display: grid; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem 1rem; border: 1.5px solid var(--stone-2); border-radius: 99px; background: var(--white); font-size: .93rem; font-weight: 560; transition: all .2s; }
.chips__row--stack .chip span { width: 100%; border-radius: var(--r); }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2.5px solid var(--orange); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; align-items: start; margin-top: 1.3rem; font-size: .88rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.consent a { color: var(--ink); }
.consent__error { display: block; margin-top: .4rem; }
.lead__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-top: 1.8rem; }
.lead__nav [data-next], .lead__nav [data-submit], .lead--contact .lead__nav .btn, .lead--callback .lead__nav .btn, .lead--referral .lead__nav .btn { margin-left: auto; }
.lead__status { margin-top: 1rem; font-weight: 600; }
.lead__status:empty { display: none; }
.lead__status.is-error { color: var(--error); }
.lead__status.is-ok { color: var(--ok); }
.lead.is-sent { opacity: .5; pointer-events: none; }

/* Kontakt */
.contact { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact__list { display: grid; gap: 1.4rem; margin: 2rem 0; }
.contact__list div { display: grid; gap: .3rem; }
.contact__list dt { display: flex; align-items: center; gap: .6rem; font: 500 .74rem var(--ff); color: var(--orange-text); }
.contact__list dd { margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--ink); }
.contact__list dd a { text-decoration: none; }
.contact__list dd a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9c6bf; padding-top: clamp(64px, 8vw, 120px); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.site-footer__top { display: grid; gap: 2.5rem 3rem; padding-bottom: clamp(48px, 6vw, 88px); }
@media (min-width: 760px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 2.4fr) minmax(0, 3fr); } }
.site-footer__logo { width: 168px; height: auto; fill: var(--orange); margin-bottom: 1.4rem; }
.site-footer__brand p { max-width: 40ch; font-size: .98rem; }
.site-footer__brand .btn { margin-top: 1.4rem; }
.site-footer__h { margin-bottom: 1.1rem; font: 500 .74rem var(--ff); color: #8d9097; }
.site-footer__nav ul { display: grid; gap: .55rem; }
.site-footer__contact address { font-style: normal; margin-bottom: 1rem; line-height: 1.6; }
.site-footer__sun { display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem; font: 400 .78rem/1.4 var(--ff); color: #8d9097; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .84rem; color: #8d9097; }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.site-footer__legal a { color: #c9c6bf; }

/* Mobile Leiste */
.mobilebar { display: none; }
@media (max-width: 760px) {
	.mobilebar { position: fixed; z-index: 90; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 6px; background: var(--ink); border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); transition: transform .4s var(--ease), opacity .3s; }
	.mobilebar.is-hidden { transform: translateY(140%); opacity: 0; }
	.mobilebar__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: 8px; color: #fff; font-weight: 680; text-decoration: none; }
	.mobilebar__btn--primary { background: var(--orange); color: var(--ink); }
	.site-footer { padding-bottom: 76px; }
}

/* Dialog */
.dialog { width: min(100% - 32px, 480px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--chalk); color: var(--text); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .5); }
.dialog::backdrop { background: rgba(13, 14, 16, .6); }
.dialog[open] { animation: dlgIn .4s var(--ease-out); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.dialog__inner { position: relative; padding: 2rem; }
.dialog__title { font-size: 2rem; font-stretch: 76%; font-weight: 800; margin-bottom: .6rem; }
.dialog__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; }
.dialog__close:hover { background: var(--stone); }

/* ---------- Artikel & schlichte Seiten ---------- */
.article__head { padding-top: clamp(40px, 6vw, 88px); }
.article__title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem); font-weight: 800; font-stretch: 72%; line-height: .98; color: var(--ink); }
.article__lead { margin-top: 1.4rem; font-size: 1.25rem; line-height: 1.5; color: var(--muted); }
.article__by { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; font: 400 .82rem var(--ff); color: var(--muted); }
.article__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.article__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.article__media { margin-top: clamp(32px, 4vw, 56px); margin-bottom: 0; }
.article__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-lg); }
.entry { padding-block: clamp(40px, 5vw, 72px); font-size: 1.1rem; line-height: 1.72; color: #2f3237; }
.entry h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-stretch: 80%; font-weight: 760; color: var(--ink); margin-top: 2.6rem; }
.entry h3 { font-size: 1.35rem; font-stretch: 86%; font-weight: 720; color: var(--ink); margin-top: 2rem; }
.entry ul, .entry ol { padding-left: 1.3rem; }
.entry li { margin-bottom: .5rem; }
.entry li::marker { color: var(--orange); }
.entry table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry td, .entry th { border-bottom: 1px solid var(--stone); padding: .6rem; text-align: left; }
.article__aside { padding-bottom: var(--sec); }
.article__cta { padding: clamp(24px, 4vw, 44px); background: var(--ink); color: #fff; border-radius: var(--r-lg); }
.article__cta h2 { font-size: 2rem; font-stretch: 76%; font-weight: 800; margin-bottom: .6rem; }
.article__cta p { color: #c9c6bf; }
.article__cta .btn { margin-top: 1.2rem; }
.page-plain__head { padding: clamp(48px, 7vw, 100px) 0 0; }
.page-plain__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); font-weight: 800; font-stretch: 72%; color: var(--ink); }
.page-plain .entry { padding-bottom: var(--sec); font-size: 1.02rem; }
.page-plain .entry h2 { font-size: 1.5rem; }
.page-plain .entry h3 { font-size: 1.2rem; }

/* Danke */
.thanks { text-align: center; padding-top: calc(var(--head-h) / 2); }
.thanks__mark { position: relative; width: 120px; margin: 0 auto 2rem; }
.thanks__mark .roofline--thanks { width: 120px; height: 34px; margin: 0; }
.thanks__check { width: 64px; height: 64px; margin: .4rem auto 0; padding: 12px; color: var(--ink); background: var(--orange); border-radius: 50%; stroke-width: 2.4; }
.thanks__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); font-weight: 800; font-stretch: 72%; line-height: 1; color: var(--ink); }
.thanks__lead { max-width: 56ch; margin: 1.2rem auto 0; font-size: 1.15rem; color: var(--muted); }
.thanks__next { display: grid; gap: 1rem; margin: 2.6rem auto 0; max-width: 560px; text-align: left; }
.thanks__next li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.2rem; background: var(--chalk); border-radius: var(--r); box-shadow: 0 0 0 1px var(--stone); }
.thanks__next .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ink); color: var(--orange); }
.thanks__next strong { display: block; color: var(--ink); }
.thanks__next span { color: var(--muted); font-size: .95rem; }

/* 404 */
.e404 { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .e404 { grid-template-columns: 1fr 1fr; } }
.e404__ill { width: 100%; }
.e404__ill .ill__roof { stroke-dashoffset: 0; }
.e404__num { font: 800 92px var(--ff); font-stretch: 66%; fill: var(--stone-2); }

/* ---------- Bewegung ----------
   Inhalte sind ohne Animation sichtbar. Bewegt werden nur: Dachlinie im H1, Hinweis im Startbild,
   Dachpacht-Skizze, Dach-Check-Demo, Modul-Explosion, Fortschrittslinie im Ablauf. */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
	.js [data-reveal], .js [data-reveal="img"] .frame, .js [data-reveal="img"] .frame img { opacity: 1; transform: none; clip-path: none; }
}

/* Druck */
@media print {
	.site-header, .mobilebar, .site-footer__nav, .hero__scroll, .dialog { display: none !important; }
	.hero { min-height: 0; color: #000; }
}
.hero--home .hero__media img { object-position: center center; }
.hero__title { line-height: 1; }
.hero--home .hero__content { max-width: 1180px; }
.hero--home .hero__lead { max-width: 58ch; }
.roofword .roofline--word { top: -.3em; height: .32em; }
.hero__title .roofword .roofline path { stroke-width: 4; }

/* ==========================================================================
   Überarbeitung: ruhigere, eigenständige Bausteine
   ========================================================================== */
html { accent-color: var(--orange); scrollbar-color: #b9b2a5 var(--paper); }
input, textarea { caret-color: var(--orange-text); }
.fact__value, .tool__area, .dcheck__value, .compare td { font-variant-numeric: tabular-nums; }

/* Sonnenbahn im Startbild (echte Berechnung für Coburg) */
.sunarc { position: absolute; right: var(--gutter); bottom: clamp(48px, 7vw, 96px); z-index: 2; margin: 0; width: 260px; color: rgba(255, 255, 255, .85); }
.sunarc[hidden] { display: none; }
.sunarc svg { width: 100%; height: auto; overflow: visible; }
.sunarc__horizon { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.sunarc__path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.25; stroke-dasharray: 2 4; }
.sunarc__sun { fill: var(--orange); stroke: #fff; stroke-width: 2; }
.sunarc.is-night .sunarc__sun { fill: #8ea3c0; }
.sunarc figcaption { display: grid; gap: .1rem; margin-top: .4rem; font: 400 .76rem/1.4 var(--ff-mono); letter-spacing: .01em; }
.sunarc__sub { color: rgba(255, 255, 255, .6); }
.site-footer__sun { font-family: var(--ff-mono); }
@media (max-width: 1099px) { .sunarc { display: none !important; } }

/* Hero-Fakten als schlichte Zeile */
.hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; max-width: none; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.hero__inner { grid-template-columns: minmax(0, 1fr) !important; }
.hero__mark-tag text { font-family: var(--ff); letter-spacing: 0; }
.btn--ghost-light { --bg: transparent; }

/* Seitenkopf schlicht, mit großer Dachlinie als Hintergrundzeichen */
.pagehead { background: var(--ink); }

/* Dachlinie nur im H1: Wort bleibt in Schriftfarbe */
.roofword { color: inherit !important; }

/* Verweisliste statt Bildkarten */
.index-wrap { display: grid; gap: 2rem clamp(40px, 6vw, 110px); }
@media (min-width: 1000px) { .index-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .index__head { margin-bottom: 0; position: sticky; top: calc(var(--head-h) + 40px); } }
.index { border-top: 1.5px solid var(--ink); }
.index__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.4rem .2rem; border-bottom: 1px solid var(--stone-2); text-decoration: none; transition: background-color .25s var(--ease), padding .35s var(--ease); }
.index__row:hover { background: var(--white); padding-inline: 1rem; }
.tone-chalk .index__row:hover { background: var(--paper); }
.index__ico .ico { width: 30px; height: 30px; stroke-width: 1.5; color: var(--orange-text); }
.index__body { display: grid; gap: .25rem; }
.index__title { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 740; font-stretch: 82%; line-height: 1.1; color: var(--ink); }
.index__text { color: var(--muted); font-size: .98rem; max-width: 60ch; }
.index__more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.index__more .ico { color: var(--orange-text); transition: transform .3s var(--ease); }
.index__row:hover .index__more .ico { transform: translateX(4px); }
@media (max-width: 640px) { .index__row { grid-template-columns: 34px minmax(0, 1fr); } .index__more { grid-column: 2; } }

/* Vorteile als Zeilen (keine Kachelraster) */
.ledger { margin: 0; border-top: 1.5px solid var(--ink); }
.ledger__row { display: grid; gap: .4rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--stone-2); }
@media (min-width: 720px) { .ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ledger dt { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.15rem; font-weight: 700; font-stretch: 88%; line-height: 1.25; color: var(--ink); }
.ledger__ico { width: 24px; height: 24px; margin-top: .05em; color: var(--orange-text); stroke-width: 1.6; }
.ledger dd { margin: 0; color: var(--muted); }

/* Eckdaten */
.facts { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) { .facts { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.facts__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 780; font-stretch: 78%; color: var(--ink); }
.facts__list { margin: 0; border-top: 1.5px solid var(--ink); }
.facts__list div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--stone-2); }
.facts__list dt { font-weight: 760; font-stretch: 80%; font-size: 1.2rem; color: var(--ink); }
.facts__list dd { margin: 0; color: var(--muted); }

/* Zitat ohne Bild */
.quote--plain { grid-template-columns: minmax(0, 1fr) !important; max-width: 980px; }
.quote__body footer { display: flex; align-items: center; gap: 1rem; }
.quote__who { display: grid; gap: .15rem; }
.quote__who strong { font-size: 1.1rem; color: #fff; }
.quote__who span { font-size: .88rem; color: var(--muted-dark); }
.quote__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Empfehlung ohne Bild */
.referral--plain { grid-template-columns: minmax(0, 1fr) !important; }
.referral--plain .referral__text { display: grid; gap: 0 4rem; }
@media (min-width: 1000px) {
	.referral--plain .referral__text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.referral--plain .referral__text > .sec-title, .referral--plain .referral__lead { grid-column: 1; }
	.referral--plain .referral__steps { grid-column: 2; grid-row: 1 / span 3; margin-top: .4rem; }
	.referral--plain .referral__small, .referral--plain .actions { grid-column: 1; }
}

/* Dach-Check-Hinweis ohne Demo-Bild */
.dcheck--plain { grid-template-columns: minmax(0, 1fr) !important; }
.dcheck--plain .dcheck__text { display: grid; gap: 0 4rem; }
@media (min-width: 1000px) {
	.dcheck--plain .dcheck__text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
	.dcheck--plain .sec-title, .dcheck--plain .sec-intro { grid-column: 1; }
	.dcheck--plain .dcheck__points { grid-column: 2; grid-row: 1 / span 2; }
	.dcheck--plain .actions { grid-column: 1; }
}

/* Kleine Textzeilen, die vorher Labels waren */
.project__model { margin: 0 0 .6rem; font-weight: 650; color: var(--orange-text); }
.tool__label { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: #ffa466; }
.thanks__topic { margin-top: 1.2rem; font-weight: 650; color: var(--orange-text); }
.article__crumb { margin: 0 0 1rem; font-size: .92rem; color: var(--muted); }
.article__crumb a { color: var(--orange-text); text-decoration: none; font-weight: 650; }
.post-card__meta { font-size: .85rem; font-weight: 600; color: var(--muted); }
.compare__sub, .project__specs dt { font-size: .84rem; color: var(--muted); }
.site-footer__h { font-size: .86rem; font-weight: 650; color: #8d9097; }
.contact__list dt { font-size: .86rem; font-weight: 650; }
.lead__progress li { font-size: .86rem; font-weight: 600; }
.layer__label text { font: 600 14px var(--ff); }
.step__no, .model__no, .referral__steps span { font-family: var(--ff); font-weight: 700; }
.split__media figcaption { font-family: var(--ff); font-size: .84rem; }
[hidden] { display: none !important; }
h1, h2, h3, .hero__title, .sec-title, .cta__title { hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
.referral--plain .referral__steps { align-content: start; gap: 1.1rem; }
.posts--text .post-card__link { height: 100%; padding: 1.6rem 1.6rem 1.8rem; border-top: 1.5px solid var(--ink); background: var(--white); border-radius: 0 0 var(--r) var(--r); transition: border-color .3s var(--ease), background-color .3s; }
.tone-chalk .posts--text .post-card__link { background: var(--paper); }
.posts--text .post-card__link:hover { border-top-color: var(--orange); }
.posts--text .post-card__title { font-size: 1.5rem; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } html #wpadminbar { position: fixed; } }

/* ---------- Nachbesserungen nach UI-Prüfung ---------- */
/* Silbentrennung in Überschriften nur auf schmalen Bildschirmen */
h1, h2, h3, .hero__title, .sec-title, .cta__title { hyphens: manual; }
@media (max-width: 599px) { h1, h2, .hero__title, .sec-title, .cta__title { hyphens: auto; } }

/* Lesbarkeit der Hero-Texte auf hellen Bildstellen */
.hero__media::after { background: linear-gradient(90deg, rgba(13, 14, 16, .86) 0%, rgba(13, 14, 16, .6) 40%, rgba(13, 14, 16, .1) 75%), linear-gradient(0deg, rgba(13, 14, 16, .88) 0%, rgba(13, 14, 16, .35) 45%, rgba(13, 14, 16, 0) 65%); }
.hero__lead, .hero__facts { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* Hero-Variante: Text auf Putzweiß, Bild rechts */
.hero-split { padding: calc(var(--head-h) + clamp(32px, 5vw, 72px)) 0 clamp(48px, 6vw, 96px); background: var(--paper); }
.hero-split__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .hero-split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.hero-split__title { font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.8rem); font-weight: 800; font-stretch: 70%; line-height: 1; letter-spacing: -.012em; color: var(--ink); }
.hero-split__title .roofword .roofline path { stroke-width: 4; }
.hero-split__lead { margin-top: 1.4rem; font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 50ch; }
.hero-split__facts { display: grid; gap: .55rem; margin-top: 1.8rem; color: var(--ink); font-weight: 550; }
.hero-split__facts li { display: flex; gap: .6rem; }
.hero-split__facts .ico { color: var(--orange-text); margin-top: .15em; }
.hero-split__media { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Vergleich: mobil als Karten je Modell */
.compare-cards { display: none; gap: 1rem; }
@media (max-width: 719px) {
	.compare { display: none; }
	.compare-cards { display: grid; }
}
.compare-card { padding: 1.3rem 1.3rem .6rem; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone); }
.compare-card.is-hl { box-shadow: 0 0 0 2px var(--orange); }
.compare-card__title { font-size: 1.35rem; font-weight: 760; font-stretch: 82%; color: var(--ink); }
.compare-card__sub { margin: .2rem 0 .6rem; font-size: .88rem; color: var(--muted); }
.compare-card dl { margin: 0; }
.compare-card dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--stone); }
.compare-card dt { font-weight: 620; color: var(--ink); font-size: .92rem; }
.compare-card dd { margin: 0; color: var(--muted); font-size: .92rem; }

/* Mobile Leiste: nicht auf Seiten, die selbst Anfrageseiten sind */
.slug-dach-check .mobilebar, .slug-kontakt .mobilebar, .slug-danke .mobilebar { display: none !important; }
@media (max-width: 760px) {
	.hero { padding-bottom: 112px; }
	.site-footer { padding-bottom: 96px; }
	.tool__search { flex-wrap: wrap; flex-basis: 100%; }
	.tool__search input { flex-basis: 100%; }
	.tool__search .btn { width: 100%; }
	.tool__search > .ico { top: 12px; }
}

/* Kontakt: großer Anruf-Button */
.contact__call { margin: .2rem 0 .6rem; font-size: 1.05rem; }
.contact__alt { display: block; font-size: .95rem; color: var(--muted); }
.contact__alt a { color: var(--ink); }

/* Danke */
.thanks__call { margin-top: 2rem; font-weight: 600; }
.thanks__call a { color: var(--orange-text); }
.thanks__more { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--stone-2); color: var(--muted); }
.thanks__more a { color: var(--ink); font-weight: 600; }

/* ---------- Dachpacht-Skizze (neu) ---------- */
.model__stage { align-items: center; }
@media (min-width: 980px) { .model__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); } }
.model__figure { margin: 0; }
.model__side .actions { margin-top: 2.2rem; }
.model__actions { display: none; }
.ill { overflow: visible; }
.ill__ground { stroke: var(--stone-2); stroke-width: 2; }
.ill__wall, .ill__door { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: square; }
.ill__gate { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.ill__roof { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linejoin: miter; stroke-linecap: square; stroke-dasharray: 1; }
.ill__mod { fill: var(--cell-2); stroke: #0e141d; stroke-width: .8; }
.ill__leg { stroke: var(--ink); stroke-width: 1.6; }
.ill__sun { fill: var(--orange-soft); stroke: var(--orange); stroke-width: 2.4; }
.ill__ray { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; }
.ill__out { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1; }
.ill__node { fill: var(--ink); }
.ill__or { font: italic 500 14px var(--ff); fill: var(--muted); text-anchor: middle; }
.ill__badge rect { fill: var(--ink); }
.ill__badge text { fill: #fff; font: 650 16px var(--ff); text-anchor: middle; }
.ill__badge--b rect { fill: var(--orange); }
.ill__badge--b text { fill: var(--ink); }
.ill__mark circle { fill: var(--chalk); stroke: var(--ink); stroke-width: 1.6; }
.ill__mark text { font: 700 13px var(--ff); text-anchor: middle; fill: var(--ink); }
.js .ill__roof { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); }
.js .ill__mod, .js .ill__leg { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(.8s + var(--k) * .12s); }
.js .ill__ray { opacity: 0; transition: opacity .6s var(--ease) calc(1.5s + var(--k) * .12s); }
.js .ill__out { stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) 1.9s; }
.js .ill__node, .js .ill__or, .js .ill__badge { opacity: 0; transition: opacity .5s var(--ease) 2.6s; }
.js .ill__mark { opacity: 0; transition: opacity .4s var(--ease) calc(2.9s + var(--k) * .15s); }
.js .is-in .ill__roof, .js .is-in .ill__out { stroke-dashoffset: 0; }
.js .is-in .ill__mod, .js .is-in .ill__leg { opacity: 1; transform: none; }
.js .is-in .ill__ray, .js .is-in .ill__node, .js .is-in .ill__or, .js .is-in .ill__badge, .js .is-in .ill__mark { opacity: 1; }

/* ---------- Modul-Explosion (veredelt) ---------- */
.module__stage { position: relative; }
.module__switch { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; margin-bottom: .6rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; }
.module__switch-label { padding: 0 .6rem 0 .7rem; font-size: .85rem; color: #aeb9c8; }
.module__switch button { min-height: 34px; padding: .3rem .95rem; border: 0; border-radius: 99px; background: transparent; color: #dfe5ee; font-weight: 600; font-size: .9rem; transition: background-color .25s, color .25s; }
.module__switch button.is-on { background: var(--orange); color: var(--ink); }
.explode .layer { transition: transform .15s linear, opacity .3s var(--ease); }
.layer--glass .layer__plate { fill: url(#wn-glass); stroke: rgba(225, 238, 250, .8); stroke-width: 1.2; }
.glass__sheen { fill: rgba(255, 255, 255, .14); transform: translateX(calc(var(--x, 0) * 220px)); transition: transform .2s linear; }
.layer--eva .layer__plate { fill: rgba(240, 244, 248, .07); stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 4; }
.layer--cells .layer__plate { fill: #0f1724; stroke: #3d5373; }
.cell { fill: #182a44; }
.cell__cut { stroke: #0b1320; stroke-width: 1; }
.cell__bus { stroke: rgba(196, 206, 220, .55); stroke-width: .5; }
.layer--back .layer__plate { fill: #22272e; stroke: #5d6772; transition: fill .4s var(--ease), stroke .4s; }
.back__box polygon { fill: #3a4048; stroke: #6c7580; stroke-width: .8; }
.back__box path { fill: none; stroke: #0b0c0e; stroke-width: 2.2; stroke-linecap: round; }
.is-glas .layer--back .layer__plate { fill: url(#wn-glass); stroke: rgba(225, 238, 250, .8); }
.frame__ring { fill: #b9c0c8; }
.frame__side--a { fill: #8b939c; }
.frame__side--b { fill: #a3aab2; }
.layer__label text { fill: #fff; font: 600 14px var(--ff); }
/* Hervorheben: Erklärung ↔ Schicht */
.explode.has-focus .layer { opacity: .22; }
.explode.has-focus .layer.is-focus { opacity: 1; }
.explode .layer.is-focus .layer__plate, .explode .layer.is-focus .frame__ring { stroke: var(--orange); stroke-width: 2; }
.explode .layer.is-focus .layer__label text { fill: var(--orange); }
.module__notes li { cursor: default; padding: .35rem .5rem; margin: 0 -.5rem; border-radius: var(--r); transition: background-color .2s; }
.module__notes li:hover, .module__notes li:focus-visible, .module__notes li.is-focus { background: rgba(255, 255, 255, .06); outline: none; }

/* ---------- Abschlussband mit Kontaktkarte, vom Footer abgesetzt ---------- */
.cta--dark + .site-footer, main > .sec--cta.cta--dark:last-child { border-bottom: 1px solid var(--line-dark); }
.site-footer { background: #0f1113; }
.cta-grid { display: grid; gap: 2.5rem 4rem; align-items: center; }
@media (min-width: 1000px) { .cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-card { display: grid; gap: 1.1rem; padding: 1.6rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.cta--orange .cta-card { background: rgba(21, 23, 26, .08); border-color: rgba(21, 23, 26, .2); }
.cta-card__who { display: flex; gap: 1rem; align-items: center; }
.cta-card__img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; }
.cta-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cta-card__who strong { display: block; font-size: 1.1rem; }
.cta-card__who span { font-size: .9rem; opacity: .75; }
.cta-card .btn { width: 100%; }
.cta-card__alt { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; opacity: .85; }
.cta-card__alt a, .cta-card__alt button { color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; font: inherit; cursor: pointer; }

/* ---------- Dachlinie über der Überschrift (wie im Logo) ---------- */
.roofed { position: relative; display: inline-block; padding-top: .34em; }
.roofbar { position: absolute; top: 0; left: calc(var(--roof-l, 0px) + .02em); width: calc(var(--roof-w, 100%) + .16em); height: .3em; pointer-events: none; }
.roofbar__line { position: absolute; left: 0; right: .4em; bottom: .04em; height: .05em; min-height: 2px; background: var(--orange); transform-origin: left center; }
.roofbar__gable { position: absolute; right: 0; top: 0; width: .4em; height: 100%; overflow: visible; }
.roofbar__gable path { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; }
.js .roofbar__line { transform: scaleX(0); transition: transform 1s var(--ease-out) .35s; }
.js .roofbar__gable path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-out) 1.2s; }
.js .roofbar__gable .roofbar__chimney { transition-delay: 1.7s; transition-duration: .3s; }
.js .is-in .roofbar__line, .js .roofed.is-in .roofbar__line { transform: none; }
.js .is-in .roofbar__gable path, .js .roofed.is-in .roofbar__gable path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .roofbar__line { transform: none; } .js .roofbar__gable path { stroke-dashoffset: 0; } }

/* ---------- Seitenkopf mit Schritten (Dach-Check) ---------- */
.pagehead__grid { display: grid; gap: 2.5rem 5rem; align-items: end; }
@media (min-width: 1000px) { .pagehead--steps .pagehead__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.pagehead__steps { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.pagehead__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-dark); color: #c9c6bf; font-size: .95rem; }
.pagehead__steps strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .1rem; }
.pagehead__no { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 700; }

/* ---------- Dach-Check: Karte und Anzeige ---------- */
.tool__help { top: auto; bottom: 14px; left: 14px; translate: none; max-width: min(460px, calc(100% - 28px)); background: var(--ink); border-left: 0; transition: background-color .3s; }
.tool__help.is-done { background: #1f3a26; }
.tool__readout.is-empty .tool__area { color: #5f646b; }
.tool__readout.is-empty .tool__area small { color: #5f646b; }
.leaflet-touch .leaflet-bar, .leaflet-bar { border: 0 !important; border-radius: var(--r) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; overflow: hidden; }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; color: var(--ink) !important; background: var(--chalk) !important; font: 600 20px/40px var(--ff) !important; border-bottom-color: var(--stone) !important; }
.leaflet-bar a:hover { background: #fff !important; color: var(--orange-text) !important; }
.leaflet-container .leaflet-control-attribution { background: rgba(251, 250, 247, .85); color: var(--muted); }
.wn-area-label { font-family: var(--ff-mono) !important; }

/* ---------- Ratgeber: Lesefluss mit Inhaltsverzeichnis und Bausteinen ---------- */
.readbar { position: fixed; z-index: 101; left: 0; right: 0; top: 0; height: 3px; background: var(--orange); transform-origin: left; transform: scaleX(var(--p, 0)); }
.article__body { display: grid; gap: 2rem; padding-block: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) { .article__body { grid-template-columns: 240px minmax(0, 760px); gap: 4.5rem; justify-content: center; } }
.article__body .entry { padding-block: 0; max-width: 760px; }
.article__toc { align-self: start; }
@media (min-width: 1100px) { .article__toc { position: sticky; top: calc(var(--head-h) + 32px); } }
@media (max-width: 1099px) { .article__toc { padding: 1.2rem 1.3rem; background: var(--chalk); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone); } }
.article__toc-title { margin: 0 0 .7rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.article__toc ol { display: grid; gap: .1rem; counter-reset: t; border-left: 1.5px solid var(--stone-2); }
.article__toc a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: .93rem; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s; }
.article__toc a:hover { color: var(--ink); }
.article__toc a.is-active { color: var(--ink); font-weight: 650; border-left-color: var(--orange); }
.article__toc-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-weight: 650; font-size: .93rem; color: var(--orange-text); text-decoration: none; }
@media (max-width: 1099px) { .article__toc-cta { display: none; } }
.entry h2 { scroll-margin-top: calc(var(--head-h) + 24px); }

.rg-kurz { margin: 2rem 0; padding: 1.5rem 1.6rem 1.6rem; background: var(--ink); color: #e8e5de; border-radius: var(--r-lg); }
.rg-kurz__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-weight: 700; color: #fff; font-size: 1rem; }
.rg-kurz__title .ico { color: var(--orange); }
.rg-kurz ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.rg-kurz li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; margin: 0; font-size: 1rem; line-height: 1.5; }
.rg-kurz li .ico { width: 22px; height: 22px; padding: 3px; margin-top: .1em; color: var(--ink); background: var(--orange); border-radius: 50%; stroke-width: 2.6; }
.entry .rg-kurz li::marker { content: none; }

.rg-hinweis { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; margin: 2rem 0; padding: 1.3rem 1.4rem; background: var(--orange-soft); border-radius: var(--r-lg); }
.rg-hinweis--achtung { background: #fdecea; }
.rg-hinweis--recht { background: #eceff3; }
.rg-hinweis__ico { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--white); color: var(--orange-text); }
.rg-hinweis--achtung .rg-hinweis__ico { color: var(--error); }
.rg-hinweis--recht .rg-hinweis__ico { color: #3a4a62; }
.rg-hinweis p { margin: 0; font-size: 1rem; line-height: 1.55; }
.rg-hinweis__label { font-size: .82rem !important; font-weight: 700; color: var(--muted); }
.rg-hinweis__title { font-weight: 700; color: var(--ink); margin: .1rem 0 .3rem !important; font-size: 1.08rem !important; }

.rg-ablauf, .rg-vergleich, .rg-bild { margin: 2.6rem 0; }
.rg-ablauf figcaption, .rg-vergleich figcaption { margin-bottom: 1rem; font-size: 1.2rem; font-weight: 760; font-stretch: 84%; color: var(--ink); }
.rg-ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 760px) { .rg-ablauf ol { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; } }
.rg-ablauf li { position: relative; display: grid; gap: .35rem; align-content: start; margin: 0; padding: 0 1rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.entry .rg-ablauf li::marker { content: none; }
.rg-ablauf__no { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: .4rem; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 700; font-size: .95rem; }
@media (min-width: 760px) { .rg-ablauf li::before { content: ""; position: absolute; top: 18px; left: 36px; right: 0; height: 2px; background: var(--stone-2); } .rg-ablauf li:last-child::before { display: none; } }
.rg-ablauf strong { color: var(--ink); font-size: 1rem; }

.rg-vergleich__scroll { overflow-x: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone); background: var(--white); }
.rg-vergleich table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .96rem; }
.rg-vergleich th, .rg-vergleich td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stone); }
.rg-vergleich thead th { font-size: 1.05rem; font-weight: 760; font-stretch: 86%; color: var(--ink); border-bottom: 2px solid var(--ink); }
.rg-vergleich thead td { border-bottom: 2px solid var(--ink); }
.rg-vergleich tbody th { width: 30%; font-weight: 650; color: var(--ink); }
.rg-vergleich tbody td { color: var(--muted); }
.rg-vergleich tbody tr:last-child > * { border-bottom: 0; }

.rg-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.rg-bild figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); }
@media (min-width: 1100px) { .rg-bild { margin-inline: -60px; } }

/* ---------- Vorher / Nachher ---------- */
.vn { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--stone); user-select: none; touch-action: pan-y; }
.vn__img { position: absolute; inset: 0; }
.vn__img img { width: 100%; height: 100%; object-fit: cover; }
.vn__img--after { clip-path: inset(0 0 0 var(--pos)); }
.vn::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none; }
.vn__handle { position: absolute; z-index: 2; top: 50%; left: var(--pos); display: flex; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--orange); color: var(--ink); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); pointer-events: none; }
.vn__handle .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.vn__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vn__range:focus-visible ~ .vn__handle, .vn:focus-within .vn__handle { outline: 3px solid #fff; outline-offset: 3px; }
.vn__tag { position: absolute; z-index: 1; top: 16px; padding: .4rem .7rem; border-radius: var(--r); background: var(--ink); color: #fff; font-weight: 650; font-size: .88rem; }
.vn__tag--before { left: 16px; }
.vn__tag--after { right: 16px; background: var(--orange); color: var(--ink); }
.vn figcaption { position: absolute; z-index: 1; left: 16px; bottom: 16px; max-width: 60%; padding: .45rem .7rem; border-radius: var(--r); background: rgba(21, 23, 26, .78); color: #fff; font-size: .86rem; }

/* ---------- Asbest-Kurz-Check ---------- */
.acheck { display: grid; gap: 2rem clamp(40px, 6vw, 100px); }
@media (min-width: 1000px) { .acheck { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .acheck__head { position: sticky; top: calc(var(--head-h) + 40px); } }
.acheck__note { display: flex; gap: .7rem; align-items: flex-start; margin-top: 0; font-size: .92rem; color: var(--muted); }
.acheck__note .ico { color: var(--orange-text); margin-top: .15em; }
.acheck__panel { padding: clamp(22px, 3vw, 40px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone), var(--shadow); }
.acheck__q { position: relative; margin: 0; padding: 0 0 1.7rem 2.6rem; }
.acheck__q::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--stone); transition: background-color .3s var(--ease); }
.acheck__q:has(input:checked)::before { background: var(--orange-line); }
.acheck__q .field__label { position: static; }
.acheck__state { position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--stone-2); background: var(--white); color: #fff; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.acheck__state .ico { width: 14px; height: 14px; stroke-width: 3; transform: scale(0); transition: transform .35s var(--ease-out); }
.acheck__q:has(input:checked) .acheck__state { background: var(--orange); box-shadow: none; }
.acheck__q:has(input:checked) .acheck__state .ico { transform: none; }

.acheck__result { margin-top: .3rem; padding: 1.4rem 1.5rem; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--stone); transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.acheck__result[data-level] { background: var(--ink); box-shadow: none; color: #fff; }
.acheck__verdict { margin: 0; font-size: 1.05rem; font-weight: 560; color: var(--muted); }
.acheck__result[data-level] .acheck__verdict { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 780; font-stretch: 82%; line-height: 1.15; color: #fff; }
.acheck__text { margin: .6rem 0 0; color: #c9ccd1; }
.acheck__text:empty { display: none; }
.acheck__result .actions { margin-top: 1.3rem; }
.acheck__scale { display: none; margin-bottom: 1.3rem; }
.acheck__result[data-level] .acheck__scale { display: block; }
.acheck__track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 8px; }
.acheck__track i { border-radius: 2px; background: rgba(255, 255, 255, .14); transition: background-color .35s var(--ease); }
.acheck__marker { position: absolute; top: 50%; left: 16.67%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--ink), 0 2px 6px rgba(0, 0, 0, .4); transition: left .6s var(--ease-out); }
.acheck__result[data-level="niedrig"] .acheck__track i:nth-child(1) { background: #7fbf8c; }
.acheck__result[data-level="mittel"] .acheck__track i:nth-child(2) { background: var(--orange-line); }
.acheck__result[data-level="mittel"] .acheck__marker { left: 50%; }
.acheck__result[data-level="hoch"] .acheck__track i:nth-child(3) { background: var(--orange); }
.acheck__result[data-level="hoch"] .acheck__marker { left: 83.33%; }
.acheck__scale-l { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .6rem; font-size: .8rem; color: #9ea3aa; }
.acheck__scale-l span:nth-child(2) { text-align: center; }
.acheck__scale-l span:nth-child(3) { text-align: right; }
.acheck__result[data-level="niedrig"] .acheck__scale-l span:nth-child(1),
.acheck__result[data-level="mittel"] .acheck__scale-l span:nth-child(2),
.acheck__result[data-level="hoch"] .acheck__scale-l span:nth-child(3) { color: #fff; font-weight: 650; }

/* Zeitleiste: Querschnitt einer Wellplatte, bis 1993 meist asbesthaltig */
.acheck__time { margin: 2.2rem 0 2.6rem; }
.acheck__wave { position: relative; height: 26px; }
.acheck__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acheck__wave path { fill: none; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.acheck__wave-a { clip-path: inset(0 43% 0 0); }
.acheck__wave-a path { stroke: var(--orange); }
.acheck__wave-b { clip-path: inset(0 0 0 57%); }
.acheck__wave-b path { stroke: var(--stone-2); }
.js .acheck__wave { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-out) .2s; }
.js .acheck__time.is-in .acheck__wave { clip-path: inset(0 -2% 0 0); }
.acheck__axis { position: relative; display: flex; justify-content: space-between; margin-top: .7rem; padding-top: .55rem; border-top: 1.5px solid var(--stone-2); font-size: .8rem; color: var(--muted); }
.acheck__year { position: absolute; left: 57%; top: .55rem; transform: translateX(-50%); font-weight: 700; color: var(--ink); }
.acheck__year::before { content: ""; position: absolute; left: 50%; top: calc(-.55rem - 7px); width: 2px; height: 12px; margin-left: -1px; background: var(--ink); }
.acheck__eras { display: grid; grid-template-columns: 57fr 43fr; gap: 1rem; margin-top: 1.1rem; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.acheck__era strong { display: block; margin-bottom: .15rem; color: var(--ink); font-weight: 700; transition: color .3s var(--ease); }
.acheck__era--nach { padding-left: .9rem; }
.acheck__wave svg, .acheck__era { transition: opacity .35s var(--ease); }
.acheck__time[data-b="vor"] .acheck__wave-b, .acheck__time[data-b="nach"] .acheck__wave-a { opacity: .35; }
.acheck__time[data-b="vor"] .acheck__era--vor strong, .acheck__time[data-b="nach"] .acheck__era--nach strong { color: var(--orange-text); }
.acheck__time[data-b="nach"] .acheck__wave-b path { stroke: var(--ink); }
@media (prefers-reduced-motion: reduce) { .js .acheck__wave { clip-path: none; transition: none; } .acheck__marker { transition: none; } }

/* ---------- Pacht gegen Geld oder Strom (Entscheidungshilfe mit Tagesverlauf) ---------- */
.pw { display: grid; gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(36px, 4.5vw, 64px); }
.pw__lab { display: grid; gap: 1.8rem clamp(28px, 4vw, 64px); padding: clamp(22px, 3.4vw, 48px); background: var(--cell); color: #fff; border-radius: var(--r-lg); }
@media (min-width: 1000px) {
	.pw__lab { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "ask chart" "out chart"; align-items: start; }
	.pw__ask { grid-area: ask; } .pw__chart { grid-area: chart; align-self: center; } .pw__out { grid-area: out; }
}
.pw__ask { margin: 0; padding: 0; border: 0; min-width: 0; }
.pw__q { padding: 0; margin-bottom: 1rem; font-size: 1.12rem; font-weight: 700; color: #fff; }
.pw__opts { display: grid; gap: .55rem; }
.pw__opt { position: relative; display: block; cursor: pointer; }
.pw__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pw__opt-box { display: grid; grid-template-columns: auto 1fr; gap: .1rem .85rem; align-items: center; padding: .85rem 1rem; border-radius: var(--r); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.pw__opt-ico { grid-row: span 2; width: 22px; height: 22px; color: var(--muted-dark); transition: color .25s var(--ease); }
.pw__opt-label { font-weight: 680; color: #fff; }
.pw__opt-hint { font-size: .88rem; color: #b9bdc3; }
.pw__opt:hover .pw__opt-box { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.pw__opt input:checked + .pw__opt-box { background: rgba(255, 102, 0, .12); box-shadow: inset 0 0 0 2px var(--orange); }
.pw__opt input:checked + .pw__opt-box .pw__opt-ico { color: var(--orange); }
.pw__opt input:focus-visible + .pw__opt-box { outline: 2.5px solid var(--orange); outline-offset: 3px; }

.pw__chart { margin: 0; min-width: 0; }
.pw__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pw__grid line { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.pw__grid .pw__base { stroke: rgba(255, 255, 255, .3); }
.pw__grid text { fill: #9ea3aa; font-family: var(--ff-mono); font-size: 12px; text-anchor: middle; }
.pw__prod { fill: rgba(255, 102, 0, .2); }
.pw__prod-line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.pw__self { fill: var(--orange); }
.pw__use { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: opacity .3s var(--ease); }
.pw:not(.has-pick) .pw__use { opacity: 0; }
.js .pw__data { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-out) .25s; }
.js .pw__lab.is-in .pw__data { clip-path: inset(0 0 0 0); }
.pw__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: .88rem; color: #d3d6da; }
.pw__legend li { display: inline-flex; align-items: center; gap: .5rem; }
.pw__key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.pw__key--self { background: var(--orange); }
.pw__key--prod { background: rgba(255, 102, 0, .2); box-shadow: inset 0 0 0 1.5px var(--orange); }
.pw__key--use { height: 3px; width: 18px; border-radius: 2px; background: #fff; }
.pw__chart figcaption { margin-top: .6rem; font-size: .82rem; color: #9ea3aa; }

.pw__out { border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }
.pw__verdict { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #c9ccd1; }
.pw.has-pick .pw__verdict { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 760; font-stretch: 82%; line-height: 1.15; color: #fff; }
.pw__text { margin: .7rem 0 0; color: #c9ccd1; }
.pw__text:empty { display: none; }

.pw__vars { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 760px) { .pw__vars { grid-template-columns: 1fr 1fr; } }
.pw__var { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); background: var(--white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--stone); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.pw__var::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--ink); transform-origin: left; transition: background-color .35s var(--ease); }
.pw__var.is-match { box-shadow: 0 0 0 2px var(--orange), 0 18px 40px -18px rgba(181, 69, 0, .45); transform: translateY(-3px); }
.pw__var.is-match::before { background: var(--orange); }
.pw__tag { position: absolute; top: clamp(18px, 2.2vw, 28px); right: clamp(18px, 2.2vw, 28px); display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .65rem; border-radius: 99px; background: var(--orange-soft); color: var(--orange-text); font-size: .82rem; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pw__tag .ico { width: 14px; height: 14px; }
.pw__var.is-match .pw__tag { opacity: 1; transform: none; }
.pw__var-title { display: flex; align-items: center; gap: .7rem; margin-top: .4rem; padding-right: 9rem; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-weight: 780; font-stretch: 80%; }
.pw__var-ico { width: 28px; height: 28px; flex: none; color: var(--orange-text); }
.pw__var-sub { margin: .35rem 0 0; color: var(--muted); }
.pw__facts { display: grid; gap: 1rem; margin: 1.5rem 0 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--stone); }
.pw__facts dt { font-size: .86rem; font-weight: 650; color: var(--muted); }
.pw__facts dd { margin: .2rem 0 0; font-size: 1.06rem; color: var(--ink); }
.pw__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; align-self: flex-start; font-weight: 700; color: var(--orange-text); text-decoration: none; }
.pw__cta .ico { transition: transform .25s var(--ease); }
.pw__cta:hover span { text-decoration: underline; text-underline-offset: .2em; }
.pw__cta:hover .ico { transform: translateX(3px); }

.pw__same { display: grid; gap: 1rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--stone-2); }
@media (min-width: 1000px) { .pw__same { grid-template-columns: auto 1fr; align-items: start; } }
.pw__same-title { margin: 0; font-weight: 760; color: var(--ink); }
.pw__same ul { display: grid; gap: .8rem 1.8rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pw__same ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pw__same ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pw__same li { display: flex; gap: .55rem; align-items: flex-start; color: var(--text); }
.pw__same li .ico { flex: none; width: 18px; height: 18px; margin-top: .2em; color: var(--orange-text); }
@media (max-width: 520px) { .pw__var-title { padding-right: 0; } .pw__tag { position: static; align-self: flex-start; margin-bottom: .6rem; display: none; } .pw__var.is-match .pw__tag { display: inline-flex; } }
@media (max-width: 640px) { .pw__grid text { font-size: 22px; } .pw__grid .pw__minor { display: none; } .pw__chart svg { margin-bottom: .4rem; } }
@media (prefers-reduced-motion: reduce) { .js .pw__data { clip-path: none; transition: none; } .pw__var { transition: none; } }
@media (max-width: 480px) {
	.acheck__scale-l span { visibility: hidden; }
	.acheck__result[data-level="niedrig"] .acheck__scale-l span:nth-child(1),
	.acheck__result[data-level="mittel"] .acheck__scale-l span:nth-child(2),
	.acheck__result[data-level="hoch"] .acheck__scale-l span:nth-child(3) { visibility: visible; }
}

/* ---------- Startseite: Leistungs-Slider im Hero ---------- */
.hero--slides { padding-bottom: clamp(22px, 3vw, 40px); touch-action: pan-y; }
.hs__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
.hs__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hs__bg.is-active { z-index: 1; opacity: 1; }
.hs__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hs__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 14, 16, .86) 0%, rgba(13, 14, 16, .6) 40%, rgba(13, 14, 16, .1) 75%), linear-gradient(0deg, rgba(13, 14, 16, .9) 0%, rgba(13, 14, 16, .4) 45%, rgba(13, 14, 16, 0) 66%); }
.hs__bg .hero__mark { z-index: 1; }
.js .hs__bg.is-active img { animation: hsZoom calc(var(--hs-int) + 3s) var(--ease-out) both; }
@keyframes hsZoom { from { transform: scale(1.06); } to { transform: none; } }
.hs__bg:not(.is-active) .hero__mark-line, .hs__bg:not(.is-active) .hero__mark-dot, .hs__bg:not(.is-active) .hero__mark-tag { animation: none; }

.hs__track { display: grid; }
.hs__slide { grid-area: 1 / 1; align-self: end; }
html:not(.js) .hs__slide:not(:first-child) { display: none; }
.js .hs__slide { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.js .hs__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease-out) .3s, transform 1s var(--ease-out) .3s, visibility 0s; }
.js .hs__slide:not(.is-active) .roofbar__line { transform: scaleX(0); transition: none; }
.js .hs__slide:not(.is-active) .roofbar__gable path { stroke-dashoffset: 1; transition: none; }

.hs__nav { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); margin-top: clamp(30px, 4.4vw, 60px); }
.hs__play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -2px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .42); border-radius: 50%; background: rgba(13, 14, 16, .25); color: #fff; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.hs__play:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hs__play .ico { width: 16px; height: 16px; }
.hs__play .hs__ico-play { display: none; }
.hs__play.is-off .hs__ico-play { display: block; }
.hs__play.is-off .hs__ico-pause { display: none; }
.hs__tabs { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
.hs__tab { display: block; padding: 8px 0 4px; color: rgba(255, 255, 255, .7); font-size: .95rem; font-weight: 650; line-height: 1.25; text-decoration: none; transition: color .25s var(--ease); }
.hs__tab:hover, .hs__tab[aria-selected="true"] { color: #fff; }
.hs__tab:focus-visible { outline-offset: 4px; }
.hs__bar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.hs__bar span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left center; }
.hs__tab[aria-selected="true"] .hs__bar span { animation: hsProg var(--hs-int) linear forwards; }
.is-paused .hs__tab[aria-selected="true"] .hs__bar span { animation-play-state: paused; }
.is-static .hs__tab[aria-selected="true"] .hs__bar span { animation: none; transform: none; }
html:not(.js) .hs__tab:first-child .hs__bar span { transform: none; }
@keyframes hsProg { to { transform: none; } }
.hs__label { display: block; margin-top: .75rem; }
@media (max-width: 699px) {
	.hs__tab { padding: 20px 0; }
	.hs__label { display: none; }
	.hs__nav { align-items: center; margin-top: 22px; }
	.hs__play { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hs__bg, .js .hs__slide, .js .hs__slide.is-active { transition-duration: .01s; transition-delay: 0s; }
	.js .hs__bg.is-active img { animation: none; }
}
.hero--slides .hs__slide { max-width: 780px; }
@media (min-width: 1500px) { .hero--slides .hs__slide { max-width: 860px; } }
@media (max-width: 699px) { .hs__bg img { object-position: 64% center; } }
/* Leaflet bringt z-Indizes bis 1000 mit: Karte in eigenen Stapelkontext, damit Menü und Kopfzeile darüber liegen */
.tool__map, .leaflet-container { isolation: isolate; z-index: 0; }
.hs__play .hs__ico-pause { stroke-width: 2.6; }
.hs__play .hs__ico-play { fill: currentColor; stroke-width: 1.5; margin-left: 2px; }

/* ---------- Abnahme: Feinkorrekturen ---------- */
/* Artikelraster: breite Tabellen dürfen die Spalte nicht aufdrücken (mobil 540 px Überbreite) */
.article__body { grid-template-columns: minmax(0, 1fr); }
.article__body > * { min-width: 0; }
/* Mindestgrößen für kleine Beschriftungen */
.project__badge, .dcheck__label { font-size: .8rem; }
.field__label .opt { font-size: .84rem; }
/* Tap-Flächen mind. 44 px */
.pw__cta { min-height: 44px; }
.person__tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
.module__switch button { min-height: 42px; }
.linkbtn { min-height: 44px; padding-block: .5rem; }

/* ---------- Menü: Startseite als Haus-Symbol ---------- */
.nav__item--home .nav__link { display: flex; align-items: center; gap: .6rem; }
.nav__home-ico { width: 20px; height: 20px; flex: none; }
@media (min-width: 1081px) {
	.nav__item--home .nav__link { padding-inline: .65rem; }
	.nav__item--home .nav__link::after { left: .65rem; right: .65rem; }
	.nav__home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1080px) { .nav__home-ico { width: 24px; height: 24px; color: var(--orange); } }
/* Menüpunkte nie umbrechen; zwischen Burger-Grenze und 1280 px etwas enger setzen */
@media (min-width: 1081px) {
	.nav__link { white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1279px) {
	.nav__list { gap: 0; }
	.nav__link { padding-inline: .55rem; font-size: .93rem; }
	.nav__link::after { left: .55rem; right: .55rem; }
	.nav__item--home .nav__link { padding-inline: .5rem; }
}

/* ---------- Anlagen: Umschalter Solarmodul / Stromspeicher, Argumente, Speicher-Zeichnung ---------- */
.module__views { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin: 1.9rem 0 1.7rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; }
.module__view { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1.15rem; border: 0; border-radius: 99px; background: transparent; color: #dfe5ee; font: 650 .98rem var(--ff); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.module__view .ico { width: 18px; height: 18px; }
.module__view:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.module__view.is-on { background: var(--orange); color: var(--ink); }
.module.is-switched .module__copy:not([hidden]) { animation: mcIn .55s var(--ease-out) both; }
@keyframes mcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.module__copy .flow p { max-width: 52ch; }

.module__args { display: grid; gap: 1.5rem 2.2rem; margin-top: 2.4rem; }
@media (min-width: 560px) { .module__args { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.module__args li { display: block; padding-top: 1.05rem; border-top: 1px solid rgba(255, 255, 255, .13); }
.module__args li strong { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; font-size: 1.02rem; line-height: 1.3; }
.module__args .ico { flex: none; width: 20px; height: 20px; color: var(--orange); }
.module__args span { display: block; font-size: .94rem; line-height: 1.5; color: #aeb9c8; }
.module__more { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-top: 1.6rem; color: #fff; font-weight: 650; text-decoration: none; }
.module__more .ico { color: var(--orange); transition: transform .25s var(--ease); }
.module__more:hover span { text-decoration: underline; text-underline-offset: .22em; }
.module__more:hover .ico { transform: translateX(3px); }

.module__svgs { display: grid; }
.module__svgs > svg { grid-area: 1 / 1; transition: opacity .55s var(--ease) .1s, transform .7s var(--ease-out) .1s, visibility 0s; }
.module.is-speicher .explode--mod, .module:not(.is-speicher) .explode--st { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.explode .layer { cursor: pointer; }
.module__hint { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 0; font-size: .86rem; color: #8f9aa8; }
.module__hint .ico { width: 16px; height: 16px; color: var(--orange); }
.module__notes li { cursor: pointer; }

.explode--st { --gap2: calc(5px + 23px * var(--x, 0)); }
.explode--st .layer { transform: translateY(calc(85px + var(--top) + var(--n) * var(--gap2))); }
.st__top { fill: #262b33; stroke: #66707c; stroke-width: 1.1; }
.st__a { fill: #2c323a; stroke: #66707c; stroke-width: 1; }
.st__b { fill: #3a414b; stroke: #66707c; stroke-width: 1; }
.st--bms .st__top { fill: #2e343d; }
.st--base .st__a, .st--base .st__b { fill: #22262c; }
.st__display { fill: #0f1724; stroke: #3d5373; stroke-width: .8; }
.st__led { fill: var(--orange); }
.st__vent { stroke: #1c2027; stroke-width: 2; stroke-linecap: round; }
.st__slot { fill: #1f242b; stroke: #55606c; stroke-width: .6; }
.explode--st .cell { fill: #182a44; stroke: #3d5373; stroke-width: .6; }
.st__term { fill: #c9cfd6; }
.st__bus { stroke: rgba(196, 206, 220, .5); stroke-width: .8; }
.st__gland { fill: #1c2027; stroke: #66707c; stroke-width: .8; }
.explode--st .layer.is-focus .st__top, .explode--st .layer.is-focus .st__a, .explode--st .layer.is-focus .st__b { stroke: var(--orange); stroke-width: 1.6; }
.js .module.is-speicher .st__led { animation: stLed 2.4s var(--ease) infinite; }
@keyframes stLed { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .module.is-switched .module__copy:not([hidden]) { animation: none; } .js .module.is-speicher .st__led { animation: none; } .module__svgs > svg { transition: none; } }
@media (max-width: 559px) {
	.module__views { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.module__view { justify-content: center; padding: .5rem .5rem; font-size: .92rem; }
}

/* ---------- Nachhaltigkeit: Cradle-to-Cradle-Kreisläufe und Beispielbewertung ---------- */
.c2c { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .c2c { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.c2c__text .flow p { max-width: 56ch; }
.c2c__loops { position: relative; margin: 0; }
.c2c__loops svg { display: block; width: 100%; height: auto; overflow: visible; }
.c2c__track { fill: none; stroke: var(--stone-2); stroke-width: 2; }
.c2c__loop { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--x, 1)); transition: stroke-dashoffset .15s linear; }
.c2c__loop--bio, .c2c__arrow--bio { stroke: var(--ok); }
.c2c__loop--tech, .c2c__arrow--tech { stroke: var(--orange); }
.c2c__arrow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: clamp(0, (var(--x, 1) - .45) * 8, 1); }
.c2c__node { fill: var(--paper); stroke-width: 3; }
.tone-chalk .c2c__node { fill: var(--chalk); }
.c2c__node--bio { stroke: var(--ok); }
.c2c__node--tech { stroke: var(--orange); }
.c2c__node--t { opacity: clamp(.3, (var(--x, 1) - .18) * 8, 1); }
.c2c__node--b { opacity: clamp(.3, (var(--x, 1) - .68) * 8, 1); }
.c2c__dot { transform-box: view-box; transition: transform .15s linear, opacity .2s; opacity: clamp(0, min(var(--x, 1) * 25, (1 - var(--x, 1)) * 25), 1); }
.c2c__dot circle { stroke: #fff; stroke-width: 2.5; }
.c2c__dot--bio { transform-origin: 170px 220px; transform: rotate(calc(var(--x, 1) * -360deg)); }
.c2c__dot--bio circle { fill: var(--ok); }
.c2c__dot--tech { transform-origin: 390px 220px; transform: rotate(calc(var(--x, 1) * 360deg)); }
.c2c__dot--tech circle { fill: var(--orange); }
.c2c__title, .c2c__label, .c2c__use { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.c2c__title { top: 50%; display: grid; justify-items: center; gap: .35rem; width: 9.5em; font-size: clamp(.82rem, .7rem + .4vw, 1rem); font-weight: 760; font-stretch: 86%; line-height: 1.15; color: var(--ink); }
.c2c__title .ico { width: 24px; height: 24px; }
.c2c__title--bio .ico { color: var(--ok); }
.c2c__title--tech .ico { color: var(--orange-text); }
.c2c__label { width: 12em; font-size: clamp(.76rem, .68rem + .3vw, .92rem); font-weight: 600; line-height: 1.25; color: var(--ink); transition: opacity .2s linear; }
.c2c__label--t { top: calc(25% - 16px); transform: translate(-50%, -100%); opacity: clamp(.35, (var(--x, 1) - .18) * 8, 1); }
.c2c__label--b { top: calc(75% + 16px); transform: translate(-50%, 0); opacity: clamp(.35, (var(--x, 1) - .68) * 8, 1); }
.c2c__use { left: 50%; top: 50%; padding: .3rem .75rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: clamp(.72rem, .66rem + .25vw, .86rem); font-weight: 700; }

.c2r { display: grid; gap: 2rem clamp(32px, 5vw, 80px); margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--stone-2); }
@media (min-width: 1000px) { .c2r { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; } .c2r__note { grid-column: 2; } }
.c2r__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 780; font-stretch: 80%; line-height: 1.05; color: var(--ink); }
.c2r__intro p { margin-top: 1rem; color: var(--muted); }
.c2r__chart { position: relative; --labw: 0px; }
@media (min-width: 700px) { .c2r__chart { --labw: 250px; } }
.c2r__scale { display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); margin-left: var(--labw); padding-bottom: .55rem; border-bottom: 1px solid var(--stone-2); font: 500 .76rem var(--ff-mono); color: var(--muted); }
.c2r__scale span { padding-left: .45rem; border-left: 1px solid var(--stone-2); }
.c2r__rows { list-style: none; margin: 0; padding: 0; }
.c2r__row { display: grid; grid-template-columns: var(--labw) minmax(0, 1fr); gap: .55rem 0; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--stone); }
.c2r__label strong { display: block; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.c2r__label span { display: block; padding-right: 1.2rem; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.c2r__track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--steps) - 1px), var(--stone) calc(100% / var(--steps) - 1px) calc(100% / var(--steps))); }
.c2r__bar { position: absolute; left: 0; top: 5px; bottom: 5px; display: flex; align-items: center; justify-content: flex-end; width: calc(var(--lv) / var(--steps) * 100%); padding-right: .6rem; border-radius: 0 3px 3px 0; background: var(--ink-3); transform-origin: left center; }
.c2r__bar em { font: 500 .72rem var(--ff-mono); font-style: normal; color: #fff; }
.js .c2r .c2r__bar { transform: scaleX(0); transition: transform 1s var(--ease-out) calc(.15s + var(--i) * .12s), background-color .45s var(--ease) 1.9s; }
.js .c2r .c2r__bar em { opacity: 0; transition: opacity .4s var(--ease) calc(.8s + var(--i) * .12s), color .45s 1.9s; }
.js .c2r.is-in .c2r__bar { transform: none; }
.js .c2r.is-in .c2r__bar em { opacity: 1; }
.c2r.is-in .c2r__row.is-min .c2r__bar, html:not(.js) .c2r__row.is-min .c2r__bar { background: var(--orange); }
.c2r.is-in .c2r__row.is-min .c2r__bar em, html:not(.js) .c2r__row.is-min .c2r__bar em { color: var(--ink); }
.c2r__cap { position: absolute; top: 0; bottom: 0; left: calc(var(--labw) + (100% - var(--labw)) * var(--min) / var(--steps)); width: 0; border-left: 2px dashed var(--orange); pointer-events: none; }
.c2r__cap span { position: absolute; top: 100%; left: 0; transform: translate(-50%, 10px); padding: .3rem .7rem; border-radius: 99px; background: var(--orange); color: var(--ink); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.js .c2r .c2r__cap { left: 100%; opacity: 0; transition: left 1.1s var(--ease-out) 1.3s, opacity .3s var(--ease) 1.3s; }
.js .c2r.is-in .c2r__cap { left: calc(var(--labw) + (100% - var(--labw)) * var(--min) / var(--steps)); opacity: 1; }
.c2r__chart { padding-bottom: 3rem; }
.c2r__note { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .92rem; color: var(--muted); }
.c2r__note .ico { flex: none; width: 18px; height: 18px; margin-top: .15em; color: var(--orange-text); }
@media (max-width: 699px) {
	.c2r__row { grid-template-columns: minmax(0, 1fr); }
	.c2r__chart { padding-bottom: 0; }
	.c2r__cap, .js .c2r .c2r__cap, .js .c2r.is-in .c2r__cap { position: static; width: auto; margin-top: 1.1rem; border: 0; }
	.c2r__cap span { position: static; display: inline-block; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .js .c2r .c2r__bar, .js .c2r .c2r__bar em, .js .c2r .c2r__cap { transition: none; } }
.c2r__scale span { padding: 0 .45rem 0 0; border-left: 0; border-right: 1px solid var(--stone-2); text-align: right; }
.c2r__cap span { top: auto; bottom: 0; transform: translate(-50%, 0); }
.c2r__chart { padding-bottom: 3.4rem; }
@media (max-width: 699px) { .c2r__chart { padding-bottom: 0; } }

/* ---------- Anlagen: Nahansicht (Zoom) ---------- */
.module__svgs { position: relative; }
.module__svgs > svg { transition: opacity .55s var(--ease) .1s, transform .7s var(--ease-out) .1s, scale .8s var(--ease-out), filter .6s var(--ease), visibility 0s; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.module__stage.is-zoom .module__svgs > svg { scale: 1.32; filter: blur(4px); }
.module__stage.is-zoom .module__svgs > svg:not([aria-hidden="true"]) { opacity: .16; }
.zoom { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; border-radius: var(--r-lg); background: #0f1620; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .6); clip-path: circle(0 at var(--zx, 50%) var(--zy, 50%)); transition: clip-path .75s var(--ease-out); }
.zoom.is-open { clip-path: circle(150% at var(--zx, 50%) var(--zy, 50%)); }
.zoom__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .9rem 0 1.25rem; }
.zoom__title { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 760; font-stretch: 84%; color: #fff; }
.zoom__close { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; background: transparent; color: #fff; font: 650 .9rem var(--ff); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.zoom__close .ico { width: 16px; height: 16px; }
.zoom__close:hover { background: #fff; color: var(--ink); }
.zoom__svg { flex: 1; min-height: 0; width: 100%; height: 100%; overflow: visible; }
.zoom__legend { display: grid; gap: 1rem 1.8rem; margin: 1.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255, 255, 255, .12); list-style: none; }
@media (min-width: 640px) { .zoom__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zoom__legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .7rem; font-size: .92rem; line-height: 1.45; color: #aeb9c8; }
.zoom__legend strong { display: block; margin-bottom: .15rem; color: #fff; }
.zoom__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: .8rem; font-weight: 700; }
.zoom__legend:not([hidden]) li { animation: mcIn .5s var(--ease-out) calc(.35s + var(--k) * .09s) both; }
.module__notes li[data-zoom] { cursor: zoom-in; }
.explode .layer[data-zoom] { cursor: zoom-in; }

/* Zeichnungen der Nahansichten */
.zoom__svg text { font-family: var(--ff); }
.zd-lead { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zd-dot { fill: var(--orange); opacity: 0; }
.zd-num { opacity: 0; transform-box: fill-box; transform-origin: center; }
.zd-num circle { fill: var(--orange); }
.zd-num text { fill: var(--ink); font-size: 13px; font-weight: 700; text-anchor: middle; }
.zoom.is-open .zd-lead { animation: draw .5s var(--ease-out) calc(.45s + var(--k) * .12s) forwards; }
.zoom.is-open .zd-dot { animation: fadeIn .3s var(--ease) calc(.8s + var(--k) * .12s) forwards; }
.zoom.is-open .zd-num { animation: pop .45s var(--ease-out) calc(.4s + var(--k) * .12s) forwards; }
.zd-glass, .zd-glass-top { fill: rgba(190, 214, 235, .16); stroke: rgba(225, 238, 250, .75); stroke-width: 1.2; }
.zd-glass-top { fill: rgba(205, 225, 245, .2); }
.zd-glass-side { fill: rgba(170, 196, 222, .12); stroke: rgba(225, 238, 250, .5); }
.zd-coat { fill: rgba(150, 130, 255, .28); }
.zd-sheen { stroke: rgba(255, 255, 255, .22); stroke-width: 3; stroke-linecap: round; }
.zd-eva { fill: rgba(240, 244, 248, .08); stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 4; }
.zd-eva-fill { fill: rgba(240, 244, 248, .1); stroke: rgba(255, 255, 255, .35); stroke-dasharray: 4 4; }
.zd-eva-side { fill: rgba(240, 244, 248, .06); stroke: rgba(255, 255, 255, .25); stroke-dasharray: 4 4; }
.zd-cell { fill: #182a44; stroke: #3d5373; stroke-width: 1; }
.zd-cell--top { fill: #15253d; stroke: #3d5373; }
.zd-back, .zd-back-side { fill: #22272e; stroke: #5d6772; }
.zd-ctx { opacity: .7; }
.zd-ray { fill: none; stroke: #ffd3ad; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zd-ray--weak { stroke: rgba(255, 211, 173, .55); stroke-dasharray: 3 5; stroke-dashoffset: 0; opacity: 0; }
.zoom.is-open .zd-ray:not(.zd-ray--weak) { animation: draw 1.1s var(--ease-out) .3s forwards; }
.zoom.is-open .zd-ray--weak { animation: fadeIn .6s var(--ease) 1.1s forwards; }
.zd-streak { stroke: rgba(225, 238, 250, .45); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.zd-hailstone { fill: #e8eef4; stroke: #9aa3ad; stroke-width: 1; }
.zd-hailshine { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.zoom.is-open .zd-hail { animation: zdHail .7s var(--ease-out) .25s both; }
@keyframes zdHail { from { opacity: 0; transform: translate(-26px, -60px); } }
.zd-impact { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.zoom.is-open .zd-impact { animation: fadeIn .3s var(--ease) .9s forwards; }
.zd-bus { fill: none; stroke: #c9cfd6; stroke-width: 1.6; }
.zd-drop { fill: #6fa8dc; }
.zd-stop { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.zoom.is-open .zd-drops { animation: zdDrops 1.2s var(--ease-out) .3s both; }
@keyframes zdDrops { from { opacity: 0; transform: translateX(20px); } }
.zd-gapbg { fill: #0b1018; }
.zd-finger { stroke: rgba(196, 206, 220, .42); stroke-width: .7; }
.zd-wire { stroke: #d3d8de; stroke-width: 1.5; }
.zd-flow { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 5 26; opacity: 0; }
.zoom.is-open .zd-flow { opacity: .9; animation: zdFlow 1.6s linear infinite; }
@keyframes zdFlow { to { stroke-dashoffset: -31; } }
.zd-cut { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 3 4; fill: none; }
.zd-backsheet { fill: #1e2329; stroke: #4a535e; }
.zd-texture { stroke: rgba(255, 255, 255, .04); stroke-width: 1; fill: none; }
.zd-lid { fill: none; stroke: rgba(255, 255, 255, .28); stroke-dasharray: 5 5; stroke-width: 1.2; }
.zd-jbox { fill: #343a42; stroke: #6c7580; stroke-width: 1.2; }
.zd-ribbon { fill: #c9cfd6; }
.zd-terminal { fill: #9aa3ad; stroke: #6c7580; }
.zd-lead-wire { fill: none; stroke: #c9cfd6; stroke-width: 1.4; }
.zd-diode { fill: #0b0c0e; stroke: #4b5563; }
.zd-diode-band { fill: #c9cfd6; }
.zd-cable { fill: none; stroke: #0b0c0e; stroke-width: 11; stroke-linecap: round; }
.zd-plug rect { fill: #2c323a; stroke: #6c7580; }
.zd-plug path { stroke: #6c7580; stroke-width: 1.4; fill: none; }
.zd-rail { fill: #8b939c; stroke: #6c7580; }
.zd-rail-slot { stroke: #5d6772; stroke-width: 2; }
.zd-seal { fill: rgba(232, 228, 220, .55); }
.zd-alu { fill: #b9c0c8; stroke: #8b939c; stroke-width: 1.2; }
.zd-clamp { fill: #7b848e; stroke: #5d6772; stroke-width: 1.2; }
.zd-bolt-head { fill: #9aa3ad; stroke: #5d6772; }
.zd-bolt { stroke: #c9cfd6; stroke-width: 2; stroke-dasharray: 4 3; }
.zd-pcb { fill: #10233a; stroke: #3d5373; stroke-width: 1.4; }
.zd-hole { fill: #0b0f15; stroke: #c9925a; stroke-width: 2; }
.zd-trace { fill: none; stroke: #c9925a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.zd-chip { fill: #0b0f15; stroke: #4b5563; }
.zd-chip-dot { fill: #4b5563; }
.zd-pin { stroke: #9aa3ad; stroke-width: 1.4; }
.zd-relay { fill: #1b2a3e; stroke: #6c7580; }
.zd-coil { fill: none; stroke: #c9925a; stroke-width: 1.4; }
.zd-fuse { fill: #e8e4dc; stroke: #9aa3ad; opacity: .85; }
.zd-fuse-wire { stroke: #6c7580; stroke-width: 1.2; }
.zd-res { fill: #c7b08a; stroke: #8b7a5c; }
.zd-header { fill: #0b0f15; stroke: #4b5563; }
.zd-pinsq { fill: #c9cfd6; }
.zd-wire2 { fill: none; stroke: #9aa3ad; stroke-width: 1.4; }
.zd-flow2 { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 4 22; opacity: 0; }
.zoom.is-open .zd-flow2 { opacity: .9; animation: zdFlow 1.4s linear infinite reverse; }
.zd-led { fill: var(--orange); }
.zd-bcell, .zd-bcell-top, .zd-bcell-side { stroke: #4d6788; stroke-width: 1.2; }
.zd-bcell { fill: #1f2b3d; }
.zd-bcell-top { fill: #2a3a52; }
.zd-bcell-side { fill: #182233; }
.zd-bcell-label { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .14); }
.zd-bcell-lines { stroke: rgba(255, 255, 255, .18); stroke-width: 2; stroke-linecap: round; }
.zd-vent { fill: #10171f; stroke: #4d6788; }
.zd-post { fill: #9aa3ad; }
.zd-term { fill: #d3d8de; stroke: #8b939c; }
.zd-pol { fill: #aeb9c8; font-size: 14px; font-weight: 700; text-anchor: middle; }
.zd-spacer { fill: #0b0f15; }
.zd-busbar { fill: #c9925a; stroke: #a8743f; }
.zd-cable2 { fill: none; stroke: #0b0c0e; stroke-width: 9; stroke-linecap: round; }
.zd-sensor { fill: var(--orange); }
.zd-sensor-wire { fill: none; stroke: var(--orange); stroke-width: 1.4; opacity: .8; }
.zoom.is-open .zd-sensor { animation: stLed 1.8s var(--ease) 1s infinite; }
.zd-floor { stroke: rgba(255, 255, 255, .18); stroke-width: 1.4; }
.zd-box-top { fill: #262b33; stroke: #66707c; }
.zd-box { fill: #22262c; stroke: #66707c; }
.zd-box-side { fill: #1b1f24; stroke: #66707c; }
.zd-grill { stroke: #12151a; stroke-width: 3; stroke-linecap: round; }
.zd-nut { fill: #7b848e; }
.zd-foot { fill: #9aa3ad; }
.zd-thread { stroke: #5d6772; stroke-width: 1.2; }
.zd-footplate { fill: #3a4048; stroke: #66707c; }
.zd-cable3 { fill: none; stroke: #0b0c0e; stroke-width: 13; stroke-linecap: round; }
.zd-gland { fill: #3a4048; stroke: #8b939c; stroke-width: 1.4; }
.zd-gland-in { fill: #0b0c0e; }
.zd-port { fill: #3a4048; stroke: #8b939c; }
.zd-port-in { fill: #0b0c0e; }
.zd-datacable { fill: none; stroke: #4d6788; stroke-width: 4; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
	.zoom, .module__svgs > svg { transition: none; }
	.zoom.is-open .zd-lead, .zoom.is-open .zd-ray:not(.zd-ray--weak) { animation: none; stroke-dashoffset: 0; }
	.zoom.is-open .zd-num, .zoom.is-open .zd-dot, .zoom.is-open .zd-impact, .zoom.is-open .zd-ray--weak { animation: none; opacity: 1; }
	.zoom.is-open .zd-flow, .zoom.is-open .zd-flow2, .zoom.is-open .zd-sensor, .zoom.is-open .zd-hail, .zoom.is-open .zd-drops { animation: none; }
	.zoom__legend:not([hidden]) li { animation: none; }
}
.cell__bus { stroke: rgba(196, 206, 220, .5); stroke-width: .35; }
.zd-wire { stroke-width: 1.1; opacity: .9; }