/*
HEATCON Anmeldung – Redesign 10/2026
Gestaltung nach der nytic-Familie (MiVaTool, AudioMonitor v2): Bühne links, Anmeldekarte rechts, hell/dunkel.
Gilt für login/index.php, forget_pw.php und update_pw.php.
*/

/* ---------- Tokens: dunkel (Standard) ---------- */
:root{
	color-scheme:dark;
	--bg:#0b0b0b; --bg2:#141414; --stage:#070707; --field:#121212;
	--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
	--text:#f5f5f5; --muted:#b4b4b4; --faint:#7d7d7d;
	--lime:#92c020; --lime-hi:#a4d42c; --lime-ink:#0b0b0b; --lime-soft:rgba(146,192,32,.14); --lime-line:rgba(146,192,32,.5); --lime-text:#92c020;
	--warn:#f2b441; --warn-soft:rgba(242,180,65,.13); --warn-line:rgba(242,180,65,.45);
	--crit:#ff5d4f; --crit-soft:rgba(255,93,79,.14);
	--display:"Thasadith","Century Gothic","Avenir Next",sans-serif;
	--body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
	/* 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:#e9ece4; --bg2:#f3f5ef; --stage:#dfe3d8; --field:#f8f9f6;
	--line:rgba(17,24,12,.11); --line2:rgba(17,24,12,.2);
	--text:#141810; --muted:#474e41; --faint:#686f62;
	--lime-soft:rgba(146,192,32,.16); --lime-line:rgba(110,155,20,.5); --lime-text:#4d7400;
	--warn:#8a5d00; --warn-soft:rgba(242,180,65,.2); --warn-line:rgba(160,110,0,.45);
	--crit:#c8321f; --crit-soft:rgba(255,93,79,.1);
	--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;
}

*{box-sizing:border-box}
html{background:var(--stage)}
body{margin:0;min-height:100vh;background:var(--stage);color:var(--text);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
[hidden]{display:none !important}

.lx{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.9fr);background:var(--stage)}

/* ---------- Bühne ---------- */
.lx-stage{position:relative;overflow:hidden;min-height:100%;border-right:1px solid rgba(var(--sc-ink),.06);
	background:radial-gradient(40% 46% at 76% 74%,rgba(var(--sc-lime),.08),transparent 70%),var(--stage)}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.lx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(72% 72% at 0% 100%,rgba(7,7,7,.9) 22%,rgba(7,7,7,.42) 60%,rgba(7,7,7,0) 100%)}
.lx-live{position:absolute;z-index:2;top:clamp(20px,4vh,36px);right:clamp(20px,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}
.lx-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}
.lx-live[data-zustand="alarm"]{border-color:var(--warn-line)}
.lx-live[data-zustand="alarm"] i{background:#f2b441;box-shadow:0 0 0 3px rgba(242,180,65,.22)}
.lx-copy{position:absolute;z-index:2;left:clamp(24px,5vw,72px);bottom:clamp(28px,7vh,80px);width:min(46%,540px)}
.lx-copy::before{content:"";position:absolute;z-index:-1;inset:-70px -60px -40px -90px;pointer-events:none;
	background:radial-gradient(closest-side,rgba(7,7,7,.94),rgba(7,7,7,.7) 55%,rgba(7,7,7,0))}
.lx-copy img{display:block;width:230px;height:auto;margin-bottom:clamp(18px,4.5vh,40px)}
.lx-claim{margin:0;font:700 clamp(36px,3.5vw,60px)/1 var(--display);letter-spacing:-.02em;color:#fff}
.lx-claim span{display:block;color:var(--lime)}
.lx-lede{margin:18px 0 0;max-width:46ch;color:#c9c9c9;font-size:16.5px;line-height:1.55}
.lx-facts{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,36px);margin:26px 0 0;padding:20px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.12)}
.lx-facts li{display:grid;gap:3px;color:#9a9a9a;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lx-facts b{font:700 28px/1 var(--display);color:#fff;letter-spacing:0;text-transform:none}

/* ---------- Szene: Linienzeichnung ---------- */
.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)}

/* ---------- Anmeldekarte ---------- */
.lx-panel{position:relative;display:grid;place-items:center;padding:clamp(24px,5vw,56px) clamp(20px,4vw,48px);background:radial-gradient(90% 60% at 100% 0%,rgba(146,192,32,.08),transparent 60%),var(--bg)}
.lx-card{width:min(400px,100%);display:grid;gap:18px}
.mlogo{display:none;width:150px;height:auto}
h1{margin:0;font:700 34px/1.05 var(--display);letter-spacing:-.01em}
.sub{margin:-8px 0 0;color:var(--muted)}
.sub b{color:var(--text);font-weight:600}

.msg{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:10px;border:1px solid;font-size:14px;line-height:1.45}
.msg svg{flex:none;margin-top:1px}
.msg-error{background:var(--crit-soft);border-color:rgba(255,93,79,.4);color:#ffd3cf}
.msg-error svg{color:var(--crit)}
.msg-success{background:var(--lime-soft);border-color:var(--lime-line);color:#dcefb0}
.msg-success svg{color:var(--lime)}
.msg-info{background:rgba(255,255,255,.05);border-color:var(--line2);color:#dedede}
.msg-info svg{color:var(--lime)}
.msg-warn{background:var(--warn-soft);border-color:var(--warn-line);color:#fbe3b4}
.msg-warn svg{color:var(--warn)}
.msg b{font-weight:600}
.msg a{color:inherit}

form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.lx-field{position:relative}
.lx-field .input{width:100%;height:56px;padding:22px 44px 6px 44px;border-radius:12px;border:1px solid var(--line2);background:var(--field);color:var(--text);font:inherit;font-size:15.5px;transition:border-color .15s ease,box-shadow .15s ease}
.lx-field.has-eye .input{padding-right:52px}
.lx-field .input:hover{border-color:rgba(255,255,255,.28)}
.lx-field .input:focus{outline:none;border-color:var(--lime-line);box-shadow:0 0 0 4px var(--lime-soft)}
.lx-field .input[aria-invalid="true"],.lx-field .input[aria-invalid="true"]:hover{border-color:var(--crit)}
.lx-field .input[aria-invalid="true"]:focus{border-color:var(--crit);box-shadow:0 0 0 4px var(--crit-soft)}
.lx-field .input:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px var(--field) inset;transition:background-color 9999s}
.lx-field label{position:absolute;left:44px;top:18px;color:var(--faint);font-size:15px;pointer-events:none;transition:all .15s ease}
.lx-field .input:focus + label,.lx-field .input:not(:placeholder-shown) + label,.lx-field .input:-webkit-autofill + label{top:8px;font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.lx-field .ico{position:absolute;left:14px;top:18px;color:var(--faint);pointer-events:none;transition:color .15s ease}
.lx-field .input:focus ~ .ico{color:var(--lime)}
.eye{position:absolute;right:8px;top:10px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--faint);cursor:pointer}
.eye:hover{color:var(--text);background:rgba(255,255,255,.05)}
.eye:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.eye .eye-off{display:none}
.eye[aria-pressed="true"] .eye-open{display:none}
.eye[aria-pressed="true"] .eye-off{display:block}
.hint{margin:0;font-size:12.5px;color:var(--faint)}
.hint-err{color:#ff8a7f}
.hint-ok{color:var(--lime-text)}

/* Passwortstärke */
.staerke{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:5px;align-items:center}
.staerke i{height:4px;border-radius:2px;background:var(--line2);transition:background .2s ease}
.staerke span{margin-left:6px;font-size:12px;color:var(--faint);min-width:5.5em;text-align:right}
.staerke[data-stufe="1"] i:nth-child(-n+1){background:var(--crit)}
.staerke[data-stufe="2"] i:nth-child(-n+2){background:var(--warn)}
.staerke[data-stufe="3"] i:nth-child(-n+3){background:var(--lime)}
.staerke[data-stufe="4"] i:nth-child(-n+4){background:var(--lime)}

.lx-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:20px;font-size:13.5px}
.lx-row a{margin-left:auto;color:var(--muted);text-decoration:none;border-radius:4px}
.lx-row a:hover{color:var(--text)}
.lx-row a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lx-caps{display:inline-flex;align-items:center;gap:6px;color:var(--warn);font-size:12.5px}

.lx-check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);cursor:pointer;line-height:1.4;width:fit-content}
.lx-check input{width:18px;height:18px;margin:0;accent-color:var(--lime);flex:none;cursor:pointer}
.lx-check small{color:var(--faint);font-size:12.5px}

.submit{height:54px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;background:var(--lime);color:var(--lime-ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s ease,transform .08s ease,box-shadow .15s ease}
.submit:hover{background:var(--lime-hi)}
.submit:active{transform:translateY(1px)}
.submit:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--lime)}
.submit .arrow{display:inline-flex;transition:transform .2s ease}
.submit:hover .arrow{transform:translateX(3px)}
.submit:disabled{cursor:progress;opacity:.8}
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(11,11,11,.25);border-top-color:var(--lime-ink);border-radius:50%;animation:spin .7s linear infinite}
.submit.is-loading .spinner{display:inline-block}
.submit.is-loading .arrow{display:none}
.ghost{height:46px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line2);border-radius:12px;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.ghost:hover{border-color:var(--lime-line);background:var(--lime-soft)}
.ghost:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.linkbtn{padding:0;border:0;background:none;font:inherit;color:var(--lime-text);font-weight:600;cursor:pointer;text-decoration:none;border-radius:4px}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.linkbtn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.lx-status{margin:0;font-size:14px;color:var(--muted);text-align:center}
.lx-status a{color:var(--lime-text);font-weight:600;text-decoration:none}
.lx-status a:hover{text-decoration:underline;text-underline-offset:3px}
.lx-back{margin:0;font-size:13.5px}
.lx-back a{color:var(--muted);text-decoration:none;border-radius:4px}
.lx-back a:hover{color:var(--text)}
.lx-back a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lx-sys{margin:0;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--faint)}
.lx-sys i{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none;transition:background .3s ease,box-shadow .3s ease}
.lx-sys .txt{color:var(--muted)}
.lx-sys a{color:var(--faint);text-decoration:none;border-radius:4px}
.lx-sys a:hover{color:var(--text)}
.lx-sys a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lx-sys[data-state="ok"] i{background:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}
.lx-sys[data-state="degraded"] i{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.lx-sys[data-state="down"] i{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.lx-note{margin:0;font-size:12px;color:var(--faint);text-align:center}
.lx-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 14px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.lx-foot a{color:var(--faint);text-decoration:none;border-radius:4px}
.lx-foot a:hover{color:var(--text)}
.lx-foot a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lx-foot small{flex-basis:100%;font-size:11.5px;color:var(--faint);opacity:.85}
.ch{display:inline-flex;align-items:center;gap:6px}
.ch i{position:relative;display:inline-block;width:12px;height:12px;border-radius:2px;background:#e0463a}
.ch i::before,.ch i::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.ch i::before{width:7px;height:2px}
.ch i::after{width:2px;height:7px}

/* Umschalter hell/dunkel */
.thema-knopf{position:absolute;z-index:3;top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.thema-knopf:hover{color:var(--text);border-color:var(--lime-line)}
.thema-knopf:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.thema-knopf .ic-sonne{display:none}
:root[data-thema="hell"] .thema-knopf .ic-mond{display:none}
:root[data-thema="hell"] .thema-knopf .ic-sonne{display:block}
.logo-hell{display:none !important}
:root[data-thema="hell"] .logo-dunkel{display:none !important}
:root[data-thema="hell"] .logo-hell{display:block !important}
:root[data-thema="hell"] .mlogo.logo-hell{display:none !important}

/* ---------- Bewegung ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@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){
	.lx-card > *{animation:lxIn .5s both}
	.lx-card > *:nth-child(2){animation-delay:.04s}
	.lx-card > *:nth-child(3){animation-delay:.08s}
	.lx-card > *:nth-child(4){animation-delay:.12s}
	.lx-card > *:nth-child(5){animation-delay:.16s}
	.lx-card > *:nth-child(6){animation-delay:.2s}
	.lx-card > *:nth-child(7){animation-delay:.24s}
	.lx-card > *:nth-child(8){animation-delay:.28s}
	.scene{animation:fadeIn 1.2s ease both}
	.lx-copy{animation:lxIn .7s .1s 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}
	.lx-live[data-zustand="befehl"] i{animation:blinken 1.4s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
	.scene .win,.scene .rad .body,.scene .st-warm,.scene .st-mitte{transition:none}
}

/* ---------- Helles Thema: Bühne und Meldungen ---------- */
:root[data-thema="hell"] .lx-stage::after{background:radial-gradient(72% 72% at 0% 100%,rgba(223,227,216,.92) 22%,rgba(223,227,216,.45) 60%,rgba(223,227,216,0) 100%)}
:root[data-thema="hell"] .lx-live{background:rgba(248,249,246,.78);border-color:rgba(17,24,12,.12);color:#3a4034}
:root[data-thema="hell"] .lx-live[data-zustand="alarm"]{border-color:var(--warn-line)}
:root[data-thema="hell"] .lx-copy::before{background:radial-gradient(closest-side,rgba(223,227,216,.95),rgba(223,227,216,.7) 55%,rgba(223,227,216,0))}
:root[data-thema="hell"] .lx-claim,:root[data-thema="hell"] .lx-facts b{color:var(--text)}
:root[data-thema="hell"] .lx-claim span{color:#5f8c00}
:root[data-thema="hell"] .lx-lede{color:#3a4034}
:root[data-thema="hell"] .lx-facts{border-top-color:rgba(17,24,12,.14)}
:root[data-thema="hell"] .lx-facts li{color:#5a6154}
: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)}
:root[data-thema="hell"] .lx-panel{background:radial-gradient(90% 60% at 100% 0%,rgba(146,192,32,.14),transparent 60%),var(--bg)}
:root[data-thema="hell"] .msg-error{border-color:rgba(200,50,31,.4);color:#a8231a}
:root[data-thema="hell"] .msg-success{color:#3f6000}
:root[data-thema="hell"] .msg-warn{color:#6b4700}
:root[data-thema="hell"] .msg-success svg,:root[data-thema="hell"] .msg-info svg,:root[data-thema="hell"] .lx-field .input:focus ~ .ico{color:#4d7400}
:root[data-thema="hell"] .msg-info{background:rgba(17,24,12,.04);color:var(--text)}
:root[data-thema="hell"] .lx-field .input:hover{border-color:rgba(17,24,12,.34)}
:root[data-thema="hell"] .eye:hover{background:rgba(17,24,12,.06)}
:root[data-thema="hell"] .hint-err{color:#b42318}
:root[data-thema="hell"] .lx-live[data-zustand="alarm"] i{background:#b07000}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1180px),(max-height:820px){
	.lx-lede{display:none}
}
@media (max-width:900px){
	.lx{grid-template-columns:1fr}
	/* Handy: ohne Bühne – direkt die Anmeldung, Logo oben in der Karte */
	.lx-stage{display:none}
	.mlogo{display:block}
	:root[data-thema="hell"] .mlogo.logo-dunkel{display:none !important}
	:root[data-thema="hell"] .mlogo.logo-hell{display:block !important}
	.lx-panel{min-height:100vh;min-height:100dvh;place-items:center;padding-top:max(32px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
}