/*
HEATCON Website – Neubau 10/2026 (ersetzt WordPress/Divi)
Gestaltung wie die Web-App HEATCON 6.0 und die nytic-Familie: dunkel als Standard, hell umschaltbar.
Die Szenen-Regeln (.scene …) sind aus app.heatcon.ch/login/assets/login.css übernommen und unten angehängt.
*/

/* ---------- Tokens: dunkel (Standard) ---------- */
:root{
	color-scheme:dark;
	--bg:#0b0b0b; --bg2:#111211; --karte:#151615; --stage:#070707; --field:#121212;
	--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
	--text:#f5f5f5; --muted:#b4b4b4; --faint:#858585;
	--lime:#92c020; --lime-hi:#a4d42c; --lime-ink:#0b0b0b; --lime-soft:rgba(146,192,32,.13); --lime-line:rgba(146,192,32,.45); --lime-text:#a3cf35;
	--warn:#f2b441; --crit:#ff5d4f; --crit-soft:rgba(255,93,79,.12);
	--display:"Thasadith","Century Gothic","Avenir Next",sans-serif;
	--body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
	--radius:18px; --radius-s:12px;
	--schatten:0 30px 80px -30px rgba(0,0,0,.8);
	--kopf-h:72px;
	/* Szene */
	--sc-ink:245,245,245; --sc-lime:146,192,32; --sc-warm:242,180,65;
	--sc-wall:#0a0a0a; --sc-slab:#0e0e0e; --sc-chip:rgba(12,12,12,.93); --sc-snow:236,242,226;
}
/* ---------- Tokens: hell ---------- */
:root[data-thema="hell"]{
	color-scheme:light;
	--bg:#eef0ea; --bg2:#e5e8df; --karte:#f8f9f6; --stage:#dfe3d8; --field:#fbfcfa;
	--line:rgba(17,24,12,.11); --line2:rgba(17,24,12,.22);
	--text:#141810; --muted:#454c40; --faint:#62695c;
	--lime-soft:rgba(146,192,32,.18); --lime-line:rgba(90,127,8,.45); --lime-text:#4d7400;
	--warn:#8a5d00; --crit:#c8321f; --crit-soft:rgba(200,50,31,.08);
	--schatten:0 30px 70px -34px rgba(30,40,20,.45);
	--sc-ink:22,28,16; --sc-lime:84,124,0; --sc-warm:176,112,0;
	--sc-wall:#eef0ea; --sc-slab:#e2e5dc; --sc-chip:rgba(250,251,248,.95); --sc-snow:255,255,255;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lime-text);text-underline-offset:3px}
a:hover{color:var(--lime-hi)}
:root[data-thema="hell"] a:hover{color:#3b5a00}
h1,h2,h3{margin:0;font-weight:700;line-height:1.12}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:600;color:var(--text)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--lime);color:var(--lime-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font:600 16px var(--body);text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.btn:hover{border-color:var(--text);color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-voll{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn-voll:hover{background:var(--lime-hi);border-color:var(--lime-hi);color:var(--lime-ink)}
:root[data-thema="hell"] .btn-voll:hover{color:var(--lime-ink)}
.btn-klein{min-height:40px;padding:0 16px;font-size:14.5px;gap:8px}
.btn-klein .i{width:18px;height:18px}
.rund{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.rund:hover{border-color:var(--text)}
.rund .i{width:18px;height:18px}
.ic-sonne,.ic-zu{display:none !important}
:root[data-thema="hell"] .ic-mond{display:none !important}
:root[data-thema="hell"] .ic-sonne{display:inline-block !important}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:50;height:var(--kopf-h);transition:background .3s ease,border-color .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease;border-bottom:1px solid transparent}
.kopf.fest{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.seite-datenschutz .kopf,.seite-impressum .kopf,.seite-fehler .kopf{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.kopf-in{height:100%;max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3vw,32px);display:flex;align-items:center;gap:24px}
.marke{display:block;color:var(--text);flex:none}
.logo{display:block;height:44px;width:auto;color:var(--text)}
.nav{flex:1;display:flex;align-items:center;justify-content:flex-end;margin-right:8px}
.nav ul{display:flex;gap:4px}
.nav a{display:block;padding:8px 14px;border-radius:999px;color:var(--muted);font-size:15.5px;font-weight:500;text-decoration:none;transition:color .2s ease,background .2s ease}
.nav a:hover{color:var(--text);background:var(--lime-soft)}
.nav a.aktiv{color:var(--text)}
.nav a.aktiv::after{content:"";display:block;height:2px;margin-top:2px;border-radius:2px;background:var(--lime)}
.nav-login{display:none !important}
.kopf-aktionen{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav-knopf{display:none}

@media (max-width:1060px){
	.nav{position:fixed;inset:var(--kopf-h) 0 auto;display:block;margin:0;padding:12px clamp(16px,4vw,32px) 24px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--schatten);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
	.nav.offen{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .2s ease}
	.nav ul{flex-direction:column;gap:2px}
	.nav a{padding:14px 12px;font-size:18px;border-radius:12px}
	.nav a.aktiv::after{display:none}
	.nav-login{display:flex !important;margin-top:14px;width:100%}
	.nav-knopf{display:inline-grid}
	.nav-knopf[aria-expanded="true"] .ic-menu{display:none !important}
	.nav-knopf[aria-expanded="true"] .ic-zu{display:inline-block !important}
	.kopf.menu-offen{background:var(--bg);border-bottom-color:var(--line)}
}
@media (max-width:560px){
	.btn-login{display:none}
	.logo{height:38px}
}

/* ---------- Bühne ---------- */
.buehne{position:relative;overflow:hidden;min-height:min(100vh,1000px);min-height:min(100svh,1000px);display:flex;align-items:flex-end;padding:calc(var(--kopf-h) + 40px) 0 clamp(56px,9vh,110px);
	background:radial-gradient(40% 46% at 76% 74%,rgba(var(--sc-lime),.08),transparent 70%),var(--stage)}
.buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(80% 80% at 0% 100%,rgba(7,7,7,.94) 24%,rgba(7,7,7,.5) 58%,rgba(7,7,7,0) 100%),linear-gradient(180deg,rgba(7,7,7,.65),rgba(7,7,7,0) 22%)}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.buehne-in{position:relative;z-index:2}
.buehne-text{max-width:600px}
.ueber{margin:0 0 14px;color:var(--lime-text);font:700 13px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase}
.claim{font:700 clamp(44px,6.4vw,88px)/.98 var(--display);letter-spacing:-.025em;color:var(--text)}
.claim span{display:block;color:var(--lime)}
.lede{margin-top:24px;max-width:52ch;color:var(--muted);font-size:clamp(17px,1.5vw,19.5px);line-height:1.6}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fakten{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,48px);margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.fakten li{display:grid;gap:4px;color:var(--faint);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.fakten b{font:700 26px/1 var(--display);letter-spacing:0;text-transform:none}
.live{position:absolute;z-index:3;top:calc(var(--kopf-h) + 18px);right:clamp(16px,3vw,36px);margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12.5px;color:#d6d6d6;transition:border-color .3s ease}
.live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(146,192,32,.18);flex:none;transition:background .3s ease,box-shadow .3s ease}
.live[data-zustand="alarm"]{border-color:rgba(242,180,65,.45)}
.live[data-zustand="alarm"] i{background:#f2b441;box-shadow:0 0 0 3px rgba(242,180,65,.22)}
.runter{position:absolute;z-index:3;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:1.5px solid var(--line2);border-radius:14px}
.runter span{position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--lime)}
/* Handy/Tablet hochkant: ohne Bühnenbild (wie der Login der App) – Text direkt unter dem Kopf */
@media (max-width:900px){
	.buehne{min-height:auto;padding:calc(var(--kopf-h) + 44px) 0 64px;background:radial-gradient(90% 60% at 100% 0%,rgba(var(--sc-lime),.1),transparent 60%),var(--stage)}
	.scene,.live,.runter,.buehne::after{display:none}
}

/* ---------- Abschnitte ---------- */
.abschnitt{position:relative;padding:clamp(80px,11vw,140px) 0}
.abschnitt-ton{background:var(--bg2)}
.abschnitt-schmal{padding:clamp(56px,7vw,88px) 0}
.titel{font:700 clamp(32px,4.2vw,52px)/1.06 var(--display);letter-spacing:-.02em;max-width:22ch}
.kopfzeile{margin-bottom:clamp(40px,5vw,64px)}
.kopfzeile-text{margin-top:20px;max-width:62ch}
.zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.intro{margin-bottom:clamp(48px,6vw,80px)}
.fliess{color:var(--muted)}
.fliess p+p{margin-top:16px}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}

/* Heizarten */
.heizarten{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.heizarten li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:15px;font-weight:500}
.heizarten .i{color:var(--lime-text)}

/* ---------- System-Fluss ---------- */
.fluss{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;align-items:stretch}
.knoten{position:relative;padding:28px 24px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--karte);display:flex;flex-direction:column}
.knoten .nr{position:absolute;top:18px;right:20px;font:700 14px var(--display);color:var(--faint)}
.knoten-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--lime-soft);color:var(--lime-text);margin-bottom:20px}
.knoten-ic .i{width:28px;height:28px}
.knoten h3{font:700 22px var(--display);margin-bottom:10px}
.knoten p{color:var(--muted);font-size:15.5px;line-height:1.55}
.marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.marken li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--bg2);color:var(--muted);font-size:13px}
.abschnitt-ton .marken li{background:var(--bg)}
.marken .i{width:15px;height:15px;color:var(--lime-text)}
.knoten-box{border-color:var(--lime-line);background:linear-gradient(180deg,var(--lime-soft),transparent 55%),var(--karte)}
.heatbox-bild{width:84px;background:none}
.heatbox-bild svg{width:84px;height:auto;overflow:visible}
.hb-deckel{fill:var(--lime);stroke:var(--lime-ink);stroke-width:1.2;stroke-linejoin:round}
.hb-seite{fill:#6f9416;stroke:var(--lime-ink);stroke-width:1.2;stroke-linejoin:round}
.hb-front{fill:#81aa1b;stroke:var(--lime-ink);stroke-width:1.2;stroke-linejoin:round}
.hb-led{fill:#e9ffc0}
.verbindung{position:relative;align-self:center;height:2px;margin:0 4px;background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 9px)}
.verbindung i{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(146,192,32,.9)}
.verbindung::after{content:"";position:absolute;right:-2px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:2px solid var(--line2);border-right:2px solid var(--line2);transform:rotate(45deg)}
@media (max-width:1060px){
	.fluss{grid-template-columns:1fr;max-width:560px;margin:0 auto}
	.verbindung{width:2px;height:36px;margin:4px auto;justify-self:center;background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 9px)}
	.verbindung i{left:50%;top:0;margin:0 0 0 -4px}
	.verbindung::after{right:auto;left:50%;top:auto;bottom:-2px;margin:0 0 0 -3.5px;transform:rotate(135deg)}
}

/* Voraussetzungen */
.voraus{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:center;padding:28px clamp(20px,3vw,36px);border-radius:var(--radius);border:1px dashed var(--line2)}
.voraus h3{font:700 20px var(--display)}
.voraus ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.voraus li{display:flex;gap:12px;align-items:flex-start}
.voraus li .i{width:24px;height:24px;color:var(--lime-text);margin-top:2px}
.voraus li span{display:grid;color:var(--muted);font-size:14.5px;line-height:1.45}
.voraus li b{font-size:16px}
@media (max-width:900px){.voraus{grid-template-columns:1fr}.voraus ul{grid-template-columns:1fr}}

/* ---------- Karten ---------- */
.karten{display:grid;gap:18px}
.karten-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.karte{padding:30px 28px;border-radius:var(--radius);background:var(--karte);border:1px solid var(--line);transition:border-color .25s ease,transform .25s ease}
.karte:hover{border-color:var(--lime-line);transform:translateY(-2px)}
.karte-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--lime-soft);color:var(--lime-text);margin-bottom:22px}
.karte-ic .i{width:26px;height:26px}
.karte h3{font:700 22px var(--display);margin-bottom:10px}
.karte p{color:var(--muted);font-size:16px;line-height:1.55}
@media (max-width:960px){.karten-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.karten-3{grid-template-columns:1fr}}

.vorteile{margin-top:clamp(48px,6vw,72px)}
.vorteile-titel{font:700 20px var(--display);margin-bottom:22px}
.vorteile ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:28px}
.vorteile li{display:grid;gap:12px;align-content:start}
.vorteile li .i{width:24px;height:24px;color:var(--lime-text)}
.vorteile li span{display:grid;gap:4px;color:var(--muted);font-size:14.5px;line-height:1.5}
.vorteile li b{font-size:16px}
@media (max-width:1060px){.vorteile ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.vorteile ul{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.vorteile ul{grid-template-columns:1fr}}

/* ---------- Web-App-Schaufenster ---------- */
.schau-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.schau-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:500 15px var(--body);cursor:pointer;transition:all .2s ease}
.schau-tabs button .i{width:18px;height:18px}
.schau-tabs button:hover{color:var(--text);border-color:var(--text)}
.schau-tabs button[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.geraete{position:relative;max-width:1060px;margin:0 auto;padding-right:clamp(40px,9vw,120px)}
.laptop{margin:0;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.laptop-schirm{padding:12px 12px 14px;border-radius:18px 18px 6px 6px;background:#1b1c1b;border:1px solid rgba(255,255,255,.14)}
.laptop-schirm img{border-radius:6px;aspect-ratio:16/10;width:100%;object-fit:cover;background:#0b0b0b}
.laptop-fuss{height:16px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#2a2b2a,#141514);position:relative}
.laptop-fuss::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;margin-left:-8%;border-radius:0 0 8px 8px;background:#0e0f0e}
.handy{position:absolute;right:0;bottom:-24px;width:clamp(120px,22%,232px);margin:0;padding:8px;border-radius:30px;background:#1b1c1b;border:1px solid rgba(255,255,255,.16);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.handy-schirm{border-radius:23px;overflow:hidden;background:#0b0b0b}
.handy-schirm img{width:100%;aspect-ratio:600/1296;object-fit:cover}
.geraete img{transition:opacity .25s ease}
.geraete img.wechsel{opacity:0}
.schau-hinweis{margin-top:44px;text-align:center;color:var(--faint);font-size:13.5px}
:root[data-thema="hell"] .laptop-schirm,:root[data-thema="hell"] .handy{background:#d9ddd2;border-color:rgba(17,24,12,.14)}
:root[data-thema="hell"] .laptop-fuss{background:linear-gradient(180deg,#cfd3c8,#b9beb2)}
:root[data-thema="hell"] .laptop-fuss::before{background:#a9aea2}

.demo{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:24px 40px;align-items:center;padding:28px clamp(22px,3.5vw,40px);border-radius:var(--radius);border:1px solid var(--lime-line);background:radial-gradient(120% 140% at 0% 0%,var(--lime-soft),transparent 60%),var(--karte)}
.demo h3{font:700 24px var(--display);margin-bottom:6px}
.demo p{color:var(--muted);font-size:15.5px}
.demo-zugang{display:flex;gap:28px;margin:0}
.demo-zugang div{display:grid;gap:2px}
.demo-zugang dt{color:var(--faint);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.demo-zugang dd{margin:0}
.demo-zugang code{font:600 20px ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--text)}
@media (max-width:900px){.demo{grid-template-columns:1fr}.demo .btn{justify-self:start}}

/* ---------- Diagramm Absenkung ---------- */
.diagramm{margin:0;padding:24px clamp(16px,2.5vw,28px) 20px;border-radius:var(--radius);background:var(--karte);border:1px solid var(--line)}
.diagramm figcaption{display:grid;gap:2px;margin-bottom:12px}
.diagramm-titel{font:700 19px var(--display)}
.diagramm-unter{color:var(--faint);font-size:13.5px}
.diagramm svg{width:100%;height:auto;display:block;overflow:visible}
.diagramm .gitter{stroke:var(--line);stroke-width:1}
.diagramm .achse{fill:var(--faint);font:500 12.5px var(--body)}
.diagramm .ohne{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5}
.diagramm .kurve{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.diagramm .ersparnis{fill:url(#schraffur)}
.diagramm .schraffur-linie{stroke:rgba(var(--sc-lime),.42);stroke-width:2}
.diagramm .ersparnis-text{fill:var(--lime-text);font:600 13.5px var(--body)}
.diagramm .marke-pkt circle{fill:var(--karte);stroke:var(--lime);stroke-width:2.5}
.diagramm .marke-pkt text{fill:var(--text);font:600 12.5px var(--body)}
.legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;color:var(--muted);font-size:13.5px}
.legende li{display:inline-flex;align-items:center;gap:8px}
.legende i{display:inline-block;width:22px;height:0;border-top:2.5px solid var(--lime)}
.legende .lg-ohne{border-top:1.5px dashed var(--muted)}
.motivation{align-items:center}
.faelle{margin-top:clamp(48px,6vw,72px)}

/* ---------- Schritte ---------- */
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:schritt;position:relative}
.schritte::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 10px)}
.schritte li{position:relative;text-align:center;padding:0 8px}
.schritt-nr{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--bg);border:2px solid var(--lime);font:700 22px var(--display);color:var(--text)}
.schritte li:last-child .schritt-nr{background:var(--lime);color:var(--lime-ink)}
.schritt-ic{display:none}
.schritte h3{font:700 21px var(--display);margin-bottom:8px}
.schritte p{color:var(--muted);font-size:15.5px;max-width:28ch;margin:0 auto}
@media (max-width:860px){
	.schritte{grid-template-columns:1fr;gap:28px;max-width:520px;margin:0 auto}
	.schritte::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 10px)}
	.schritte li{text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding:0}
	.schritt-nr{margin:0;grid-row:span 2}
	.schritte p{margin:0}
	.schritte h3{align-self:end;margin:4px 0 4px}
}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);margin-bottom:18px;filter:contrast(1.03)}
.person h3{font:700 21px var(--display)}
.person .rolle{margin:4px 0 10px;color:var(--lime-text);font-size:13.5px;font-weight:600}
.person p:last-child{color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:960px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.team{grid-template-columns:1fr 1fr;gap:18px}.person h3{font-size:18px}}

.zeitlinie{margin-top:clamp(56px,7vw,88px)}
.zeitlinie h3{font:700 20px var(--display);margin-bottom:26px}
.zeitlinie ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.zeitlinie ol::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line2)}
.zeitlinie li{position:relative;padding:28px 16px 0 0;display:grid;gap:4px}
.zeitlinie li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--bg2);border:2px solid var(--lime)}
.zeitlinie li.jetzt::before{background:var(--lime);box-shadow:0 0 0 5px var(--lime-soft)}
.zeitlinie time{color:var(--faint);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.zeitlinie b{font:700 18px/1.25 var(--display)}
@media (max-width:860px){
	.zeitlinie ol{grid-template-columns:1fr;gap:22px}
	.zeitlinie ol::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
	.zeitlinie li{padding:0 0 0 34px}
}

/* ---------- Partner ---------- */
.partner{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.partner .ueber{margin:0}
.partner ul{display:flex;align-items:center;gap:clamp(32px,6vw,80px);flex-wrap:wrap}
.partner a{display:block;padding:8px;opacity:.75;transition:opacity .2s ease}
.partner a:hover{opacity:1}
.partner-logo{display:block;height:44px;background:var(--text);-webkit-mask:var(--bild) center/contain no-repeat;mask:var(--bild) center/contain no-repeat}
.partner-brennwall{--bild:url(img/partner-brennwall.png);width:151px}
.partner-nytic{--bild:url(img/partner-nytic.png);width:153px;height:40px}

/* ---------- Kontakt ---------- */
.kontakt{align-items:start}
.kontakt .fliess{margin-top:20px;max-width:46ch}
.kontakt-wege{display:grid;gap:16px;margin-top:32px}
.kontakt-wege li{display:flex;gap:14px;align-items:flex-start;color:var(--muted)}
.kontakt-wege .i{width:22px;height:22px;color:var(--lime-text);margin-top:2px}
.formular{display:grid;gap:18px;padding:clamp(22px,3.5vw,36px);border-radius:var(--radius);background:var(--karte);border:1px solid var(--line)}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.reihe{grid-template-columns:1fr}}
.feld{display:grid;gap:7px}
.feld label{font-size:14.5px;font-weight:600;color:var(--text)}
.optional{font-weight:400;color:var(--faint)}
.feld input,.feld textarea,.feld select{width:100%;min-height:50px;padding:12px 15px;border-radius:var(--radius-s);border:1px solid var(--line2);background:var(--field);color:var(--text);font:16px/1.4 var(--body);transition:border-color .2s ease,box-shadow .2s ease}
.feld textarea{resize:vertical;min-height:140px}
.feld select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--muted)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}
.feld.fehler input,.feld.fehler textarea{border-color:var(--crit)}
.feld-fehler{color:var(--crit);font-size:13.5px}
.feld-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{color:var(--faint);font-size:13.5px;line-height:1.5}
.formular .btn{justify-self:start}
.formular .btn[disabled]{opacity:.6;cursor:progress}
.meldung{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-s);font-size:15px;line-height:1.45;background:var(--lime-soft);border:1px solid var(--lime-line);color:var(--text)}
.meldung .i{color:var(--lime-text);margin-top:1px}
.meldung-fehler{background:var(--crit-soft);border-color:var(--crit)}
.meldung-fehler .i{color:var(--crit)}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--line);background:var(--bg);padding:clamp(56px,7vw,80px) 0 28px;font-size:15px}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px}
.logo-fuss{height:52px;margin-bottom:18px}
.fuss-marke p{color:var(--muted);max-width:36ch}
.fuss h2{font:700 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.fuss address{font-style:normal;color:var(--muted);line-height:1.7}
.fuss ul{display:grid;gap:8px}
.fuss ul a{color:var(--muted);text-decoration:none}
.fuss ul a:hover{color:var(--text)}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--faint)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px rgba(133,133,133,.18)}
.status[data-zustand="ok"] i{background:var(--lime);box-shadow:0 0 0 3px rgba(146,192,32,.2)}
.status[data-zustand="degraded"] i{background:var(--warn)}
.status[data-zustand="down"] i{background:var(--crit)}
.status a{color:var(--faint)}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px}
.swiss{display:inline-flex;align-items:center;gap:8px}
.swiss svg{width:16px;height:16px}
@media (max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media (max-width:420px){.fuss-raster{grid-template-columns:1fr}}

/* ---------- Textseiten (Datenschutz, Impressum) ---------- */
.dokument{padding:calc(var(--kopf-h) + clamp(48px,7vw,88px)) 0 clamp(72px,9vw,120px)}
.dokument .wrap{max-width:820px}
.dokument h1{font:700 clamp(36px,5vw,56px)/1.05 var(--display);letter-spacing:-.02em;margin-bottom:12px}
.dokument .stand{color:var(--faint);margin-bottom:40px}
.dokument h2{font:700 24px var(--display);margin:44px 0 12px}
.dokument p,.dokument li{color:var(--muted)}
.dokument p+p{margin-top:12px}
.dokument ul{list-style:disc;padding-left:22px;display:grid;gap:8px;margin-top:10px}
.dokument dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;margin:0}
.dokument dt{color:var(--faint)}
.dokument dd{margin:0;color:var(--text)}
@media (max-width:560px){.dokument dl{grid-template-columns:1fr;gap:2px}.dokument dd{margin-bottom:12px}}

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion:no-preference){
	.js .zeigen{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
	.js .zeigen.sichtbar{opacity:1;transform:none}
	.buehne-text > *{animation:hcIn .8s cubic-bezier(.2,.7,.2,1) both}
	.buehne-text > *:nth-child(2){animation-delay:.08s}
	.buehne-text > *:nth-child(3){animation-delay:.16s}
	.buehne-text > *:nth-child(4){animation-delay:.24s}
	.buehne-text > *:nth-child(5){animation-delay:.32s}
	.runter span{animation:hcRunter 2.4s ease-in-out infinite}
	.verbindung i{animation:hcFluss 3.2s linear infinite}
	.fluss .verbindung:nth-of-type(4) i{animation-delay:-1s}
	.fluss .verbindung:nth-of-type(6) i{animation-delay:-2s}
	.hb-led{animation:blinken 3s ease-in-out infinite}
}
@keyframes hcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hcRunter{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes hcFluss{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@media (max-width:1060px){
	@keyframes hcFluss{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
}

/* ---------- Helles Thema: Bühne ---------- */
:root[data-thema="hell"] .buehne::after{background:radial-gradient(80% 80% at 0% 100%,rgba(223,227,216,.95) 24%,rgba(223,227,216,.5) 58%,rgba(223,227,216,0) 100%),linear-gradient(180deg,rgba(223,227,216,.7),rgba(223,227,216,0) 22%)}
:root[data-thema="hell"] .live{background:rgba(248,249,246,.82);border-color:rgba(17,24,12,.12);color:#3a4034}
:root[data-thema="hell"] .live[data-zustand="alarm"] i{background:#b07000}
:root[data-thema="hell"] .claim span{color:#5f8c00}


/* ====================================================================
   Szene (aus app.heatcon.ch/login/assets/login.css, unverändert)
   ==================================================================== */
.scene .ln{fill:none;stroke:rgba(var(--sc-ink),.46);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .fine{stroke:rgba(var(--sc-ink),.2);stroke-width:1}
.scene .wall{fill:var(--sc-wall)}
.scene .slab{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.5)}
.scene .roof{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55)}
.scene .snowcap{fill:none;stroke:rgba(var(--sc-snow),.8);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .ground{stroke:rgba(var(--sc-ink),.32)}
.scene .walk{stroke:rgba(var(--sc-ink),.1);stroke-dasharray:3 7}
.scene .earth{fill:rgba(var(--sc-ink),.018);stroke:none}
.scene .tree{fill:rgba(var(--sc-lime),.06);stroke:rgba(var(--sc-lime),.42);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .mt{fill:none;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .mt.back{stroke:rgba(var(--sc-lime),.15)}
.scene .mt.front{stroke:rgba(var(--sc-lime),.26)}
.scene .mt.snow{stroke:rgba(var(--sc-snow),.5)}
.scene .node{fill:rgba(var(--sc-lime),.7)}
.scene .node.back{fill:rgba(var(--sc-lime),.36)}
.scene .flake{fill:rgba(var(--sc-snow),.55)}
.scene .win{fill:rgba(var(--sc-ink),.018);stroke:rgba(var(--sc-ink),.5);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill 1.1s ease,stroke 1.1s ease}
.scene .win.lit{fill:rgba(var(--sc-lime),.3);stroke:rgba(var(--sc-lime),.95)}
.scene .mull{stroke:rgba(var(--sc-ink),.3);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .unit{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55)}
.scene .hearth{fill:rgba(var(--sc-ink),.03);stroke:rgba(var(--sc-ink),.4)}
.scene .flame{fill:rgba(var(--sc-lime),.85);transform-box:fill-box;transform-origin:50% 100%}
.scene .flammen{transform-box:fill-box;transform-origin:50% 100%;transition:opacity .6s ease,transform .6s ease}
.scene .tank{stroke:rgba(var(--sc-ink),.55);stroke-width:1.4;vector-effect:non-scaling-stroke}
.scene .st-warm{stop-color:rgb(var(--sc-lime));stop-opacity:.5;transition:stop-opacity 4s ease}
.scene .st-mitte{stop-color:rgb(var(--sc-lime));stop-opacity:.16;transition:stop-opacity 4s ease}
.scene .st-kalt{stop-color:rgb(var(--sc-ink));stop-opacity:.03}
.scene .pipe{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .pipe.vl{stroke:rgba(var(--sc-lime),.42)}
.scene .pipe.rl{stroke:rgba(var(--sc-ink),.22)}
.scene .flow{fill:none;stroke-width:1.6;stroke-dasharray:2 10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .flow.vl{stroke:rgba(var(--sc-lime),.95)}
.scene .flow.rl{stroke:rgba(var(--sc-ink),.45)}
.scene .rad .body{fill:rgba(var(--sc-lime),.2);stroke:rgba(var(--sc-ink),.5);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill 5s ease}
.scene .cable{fill:none;stroke:rgba(var(--sc-ink),.2);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .mast{stroke:rgba(var(--sc-ink),.6);stroke-width:1.4;vector-effect:non-scaling-stroke}
.scene .box{fill:var(--sc-slab);stroke:rgba(var(--sc-lime),.75);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .8s ease,stroke .8s ease}
.scene .box.empfang{fill:rgba(var(--sc-lime),.18);stroke:rgb(var(--sc-lime));transition:fill .3s ease,stroke .3s ease}
.scene.alarm .box.empfang{fill:rgba(var(--sc-warm),.22);stroke:rgb(var(--sc-warm))}
.scene .kled{fill:rgba(var(--sc-ink),.25);transition:fill .4s ease}
.scene .kled.an{fill:rgb(var(--sc-lime));transition:none}
.scene .boxtxt{fill:rgba(var(--sc-ink),.75);font:600 7.5px var(--body);letter-spacing:.14em}
.scene .led{fill:rgb(var(--sc-lime));transition:fill .3s ease}
.scene .oil{fill:rgba(var(--sc-ink),.1);stroke:none}
.scene .oilsurf{stroke:rgba(var(--sc-ink),.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .schall{fill:none;stroke:rgba(var(--sc-lime),.9);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .schall.echo{stroke:rgba(var(--sc-lime),.45)}
.scene .puls{fill:rgb(var(--sc-lime));filter:drop-shadow(0 0 3px rgba(var(--sc-lime),.8))}
.scene .puls.warm{fill:rgb(var(--sc-warm));filter:drop-shadow(0 0 3px rgba(var(--sc-warm),.8))}
.scene .sensor{fill:rgb(var(--sc-lime));stroke:var(--sc-wall);stroke-width:1.5;vector-effect:non-scaling-stroke}
.scene .leader{fill:none;stroke:rgba(var(--sc-ink),.32);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.scene .chip .bg{fill:var(--sc-chip);stroke:rgba(var(--sc-ink),.2);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .3s ease}
.scene .chip .k{fill:rgba(var(--sc-ink),.55);font:600 7.5px var(--body);letter-spacing:.14em}
.scene .chip .v{fill:rgb(var(--sc-ink));font:700 15px var(--display);font-variant-numeric:tabular-nums}
.scene .chip .d{fill:rgb(var(--sc-lime));transition:fill .3s ease;transform-box:fill-box;transform-origin:center}
.scene .chip.alarm .bg{stroke:rgba(var(--sc-warm),.9)}
.scene .chip.alarm .d,.scene .chip.alarm .v{fill:rgb(var(--sc-warm))}
.scene .chip .alarmtxt{fill:rgb(var(--sc-warm));font:700 7.5px var(--body);letter-spacing:.14em;opacity:0;transition:opacity .3s ease}
.scene .chip.alarm .alarmtxt{opacity:1}

/* Störung: Brenner aus, Vorlauf steht, Heizkörper und Speicher kühlen ab */
.scene.stoerung .flammen{opacity:0;transform:scaleY(.25)}
.scene.stoerung .flow.vl{opacity:.25}
.scene.stoerung .rad .body{fill:rgba(var(--sc-lime),.04)}
.scene.stoerung .st-warm{stop-opacity:.24}
.scene.stoerung .st-mitte{stop-opacity:.06}
.scene.alarm .led{fill:rgb(var(--sc-warm))}
.scene.alarm .box{stroke:rgba(var(--sc-warm),.85)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes fliessen{to{stroke-dashoffset:-24}}
@keyframes flackern{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.96,1.06) skewX(-2deg)}60%{transform:scale(1.03,.94) skewX(1.5deg)}100%{transform:scale(.98,1.03) skewX(-1deg)}}
@keyframes blinken{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes senden{0%{transform:scale(1)}40%{transform:scale(1.8)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
	.scene{animation:fadeIn 1.2s ease both}
	.scene .tw{animation:twinkle 7s ease-in-out infinite}
	.scene .flow{animation:fliessen 4s linear infinite}
	.scene .flow.rl{animation-duration:6s}
	.scene.stoerung .flow.vl{animation-play-state:paused}
	.scene .flame{animation:flackern 1.8s ease-in-out infinite alternate}
	.scene .flame.f2{animation-duration:2.3s;animation-delay:-.8s}
	.scene .flame.f3{animation-duration:1.5s;animation-delay:-.4s}
	.scene .led{animation:blinken 4s ease-in-out infinite}
	.scene.alarm .led{animation-duration:1.2s}
	.scene .chip.sendet .d{animation:senden 1s ease-in-out}
}
@media (prefers-reduced-motion:reduce){
	.scene .win,.scene .rad .body,.scene .st-warm,.scene .st-mitte{transition:none}
}
:root[data-thema="hell"] .scene .snowcap{stroke:rgba(255,255,255,.95)}
:root[data-thema="hell"] .scene .flake{fill:rgba(120,134,110,.35)}
:root[data-thema="hell"] .scene .mt.back{stroke:rgba(77,116,0,.22)}
:root[data-thema="hell"] .scene .mt.front{stroke:rgba(77,116,0,.36)}
:root[data-thema="hell"] .scene .mt.snow{stroke:rgba(28,36,20,.45)}
:root[data-thema="hell"] .scene .win.lit{fill:rgba(146,192,32,.38)}
:root[data-thema="hell"] .scene .flame{fill:rgba(110,160,10,.9)}

/* Diagramm: Beschriftung auf schmalen Bildschirmen grösser (SVG wird verkleinert) */
@media (max-width:620px){
	.diagramm .achse{font-size:21px}
	.diagramm .marke-pkt text,.diagramm .ersparnis-text{font-size:21px}
	.diagramm .marke-pkt circle{r:7px}
	.diagramm .kurve{stroke-width:3.5}
}