/*
Projekt Doku Anmeldung – Redesign 10/2026
Gestaltung nach der nytic-Familie (HEATCON, MiVaTool, AudioMonitor v2, cellus): Bühne links, Anmeldekarte rechts, hell/dunkel.
Markenfarben Projekt Doku: Gelbgrün #dfe46f, Anthrazit #373735, Salbei #899883.
Gilt für login/index.php und login/passwort-vergessen.php.
*/

/* ---------- Tokens: dunkel (Standard) ---------- */
:root{
	color-scheme:dark;
	--bg:#0f100e; --bg2:#171815; --stage:#0a0b09; --field:#151613;
	--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18);
	--text:#f5f5f5; --muted:#b4b4b4; --faint:#7d7d7d;
	--lime:#dfe46f; --lime-hi:#e9ed8c; --lime-ink:#1f201c; --lime-soft:rgba(223,228,111,.13); --lime-line:rgba(223,228,111,.5); --lime-text:#dfe46f;
	--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,240; --sc-lime:223,228,111; --sc-warm:242,180,65; --sc-rec:255,93,79;
	--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:#eff1ea; --bg2:#f6f7f2; --stage:#e6e8dc; --field:#fbfbf8;
	--line:rgba(17,24,12,.11); --line2:rgba(17,24,12,.2);
	--text:#1f201c; --muted:#4a4c44; --faint:#6b6d64;
	--lime-soft:rgba(190,198,40,.2); --lime-line:rgba(120,128,20,.5); --lime-text:#5f6a12;
	--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:31,32,28; --sc-lime:126,136,20; --sc-warm:176,112,0; --sc-rec:200,50,31;
	--sc-wall:#f1f2ec; --sc-slab:#e3e5da; --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(10,11,9,.9) 22%,rgba(10,11,9,.42) 60%,rgba(10,11,9,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(223,228,111,.18);flex:none;transition:background .3s ease,box-shadow .3s ease}
.lx-live[data-zustand="ereignis"]{border-color:var(--warn-line)}
.lx-live[data-zustand="ereignis"] 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(10,11,9,.94),rgba(10,11,9,.7) 55%,rgba(10,11,9,0))}
.lx-copy img{display:block;width:250px;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,.scene-teil .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,.scene-teil .fine{stroke:rgba(var(--sc-ink),.2);stroke-width:1}
.scene .snowcap,.scene-teil .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,.scene-teil .ground{stroke:rgba(var(--sc-ink),.32)}
.scene .walk,.scene-teil .walk{stroke:rgba(var(--sc-ink),.1);stroke-dasharray:3 7}
.scene .earth,.scene-teil .earth{fill:rgba(var(--sc-ink),.018);stroke:none}
.scene .tree,.scene-teil .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,.scene-teil .mt{fill:none;stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .mt.back,.scene-teil .mt.back{stroke:rgba(var(--sc-lime),.15)}
.scene .mt.front,.scene-teil .mt.front{stroke:rgba(var(--sc-lime),.26)}
.scene .mt.snow,.scene-teil .mt.snow{stroke:rgba(var(--sc-snow),.5)}
.scene .node,.scene-teil .node{fill:rgba(var(--sc-lime),.7)}
.scene .node.back,.scene-teil .node.back{fill:rgba(var(--sc-lime),.36)}
.scene .flake,.scene-teil .flake{fill:rgba(var(--sc-snow),.55)}
.scene .zaun,.scene-teil .zaun{fill:rgba(var(--sc-ink),.02);stroke:rgba(var(--sc-ink),.28);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .zaungitter,.scene-teil .zaungitter{stroke:rgba(var(--sc-ink),.12);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .stapel,.scene-teil .stapel{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.5);stroke-width:1;vector-effect:non-scaling-stroke}

/* Rohbau */
.scene .bau,.scene-teil .bau{transition:opacity 1.4s ease}
.scene .bau.weg,.scene-teil .bau.weg{opacity:0}
.scene .decke,.scene-teil .decke{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55)}
.scene .dach,.scene-teil .dach{fill:var(--sc-wall);stroke:rgba(var(--sc-ink),.55)}
.scene .saeule,.scene-teil .saeule{stroke:rgba(var(--sc-ink),.62);stroke-width:3;stroke-linecap:square;vector-effect:non-scaling-stroke}
.scene .schalung,.scene-teil .schalung{fill:rgba(var(--sc-lime),.035);stroke:rgba(var(--sc-lime),.55);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.scene .win,.scene-teil .win{fill:rgba(var(--sc-ink),.018);stroke:rgba(var(--sc-ink),.4);stroke-width:1.1;vector-effect:non-scaling-stroke;transition:fill 1.1s ease,stroke 1.1s ease}
.scene .win.lit,.scene-teil .win.lit{fill:rgba(var(--sc-lime),.26);stroke:rgba(var(--sc-lime),.9)}

/* Turmkran */
.scene .gurt,.scene-teil .gurt{fill:none;stroke:rgba(var(--sc-ink),.62);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .gitter,.scene-teil .gitter{stroke:rgba(var(--sc-ink),.28);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .abspannung,.scene-teil .abspannung{stroke:rgba(var(--sc-ink),.35);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .gegengewicht,.scene-teil .gegengewicht{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .kabine,.scene-teil .kabine{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.6);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .kabinenfenster,.scene-teil .kabinenfenster{fill:rgba(var(--sc-lime),.3);stroke:none}
.scene .warnlicht,.scene-teil .warnlicht{fill:rgb(var(--sc-rec))}
.scene .katze,.scene-teil .katze{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.7);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .seil,.scene-teil .seil{fill:none;stroke:rgba(var(--sc-ink),.55);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .haken,.scene-teil .haken{fill:none;stroke:rgba(var(--sc-ink),.75);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .last rect,.scene-teil .last rect{fill:rgba(var(--sc-lime),.28);stroke:rgb(var(--sc-lime));stroke-width:1.2;vector-effect:non-scaling-stroke}

/* Kamera, Solar, Modem */
.scene .mast,.scene-teil .mast{stroke:rgba(var(--sc-ink),.6);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .verteiler,.scene-teil .verteiler{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.6);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .blitzsymbol,.scene-teil .blitzsymbol{fill:rgb(var(--sc-warm))}
.scene .stromtxt,.scene-teil .stromtxt{fill:rgba(var(--sc-ink),.6);font:700 6px var(--body);letter-spacing:.06em}
.scene .strom,.scene-teil .strom{fill:none;stroke:rgba(var(--sc-warm),.55);stroke-width:1.2;stroke-dasharray:5 3;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* Drohne */
.scene .drohne-arm,.scene-teil .drohne-arm{stroke:rgba(var(--sc-ink),.75);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .drohne-motor,.scene-teil .drohne-motor{fill:rgba(var(--sc-ink),.75)}
.scene .drohne-koerper,.scene-teil .drohne-koerper{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.8);stroke-width:1.3;vector-effect:non-scaling-stroke}
.scene .drohne-bein,.scene-teil .drohne-bein{fill:none;stroke:rgba(var(--sc-ink),.6);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .rotor,.scene-teil .rotor{fill:rgba(var(--sc-ink),.18);stroke:rgba(var(--sc-ink),.55);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.scene .drohne-led,.scene-teil .drohne-led{fill:rgb(var(--sc-lime))}
.scene .drohne-led.an,.scene-teil .drohne-led.an{fill:rgb(var(--sc-rec))}
.scene .drohnenkegel,.scene-teil .drohnenkegel{fill:rgba(var(--sc-lime),.16);stroke:none;opacity:0;transition:opacity .6s ease}
.scene .drohnenkegel.blitz,.scene-teil .drohnenkegel.blitz{opacity:1;transition:none}
.scene .gehaeuse,.scene-teil .gehaeuse{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.65);stroke-width:1.2;vector-effect:non-scaling-stroke}
.scene .schirm,.scene-teil .schirm{fill:none;stroke:rgba(var(--sc-ink),.65);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .lens,.scene-teil .lens{fill:rgb(var(--sc-lime))}
.scene .cled,.scene-teil .cled{fill:rgba(var(--sc-lime),.6);transition:fill .4s ease}
.scene .cled.an,.scene-teil .cled.an{fill:rgb(var(--sc-rec));transition:none}
.scene .antenne,.scene-teil .antenne{fill:rgb(var(--sc-lime))}
.scene .box,.scene-teil .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,.scene-teil .box.empfang{fill:rgba(var(--sc-lime),.18);stroke:rgb(var(--sc-lime));transition:fill .3s ease,stroke .3s ease}
.scene .boxtxt,.scene-teil .boxtxt{fill:rgba(var(--sc-ink),.75);font:600 7.5px var(--body);letter-spacing:.14em}
.scene .led,.scene-teil .led{fill:rgba(var(--sc-lime),.55);transition:fill .3s ease}
.scene .led.an,.scene-teil .led.an{fill:rgb(var(--sc-lime));transition:none}
.scene .cable,.scene-teil .cable{fill:none;stroke:rgba(var(--sc-ink),.22);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .funk,.scene-teil .funk{fill:none;stroke:rgba(var(--sc-lime),.3);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .welle,.scene-teil .welle{fill:none;stroke:rgb(var(--sc-lime));stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .fov-a,.scene-teil .fov-a{stop-color:rgb(var(--sc-lime));stop-opacity:.16}
.scene .fov-b,.scene-teil .fov-b{stop-color:rgb(var(--sc-lime));stop-opacity:.02}
.scene .fov,.scene-teil .fov{opacity:.85;transition:opacity .5s ease}
.scene .fovflaeche,.scene-teil .fovflaeche{stroke:none}
.scene .fovrand,.scene-teil .fovrand{fill:none;stroke:rgba(var(--sc-lime),.2);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .5s ease}
.scene .fov.blitz,.scene-teil .fov.blitz{opacity:1;transition:none}
.scene .fov.blitz .fovrand,.scene-teil .fov.blitz .fovrand{stroke:rgba(var(--sc-snow),.95);transition:none}
.scene .puls,.scene-teil .puls{fill:rgb(var(--sc-lime));filter:drop-shadow(0 0 3px rgba(var(--sc-lime),.8))}

/* Karten */
.scene .chip .bg,.scene-teil .chip .bg{fill:var(--sc-chip);stroke:rgba(var(--sc-ink),.2);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .6s ease}
.scene .chip.neu .bg,.scene-teil .chip.neu .bg{stroke:rgb(var(--sc-lime));transition:none}
.scene .chip .k,.scene-teil .chip .k{fill:rgba(var(--sc-ink),.55);font:600 7.5px var(--body);letter-spacing:.14em}
.scene .chip .v,.scene-teil .chip .v{fill:rgb(var(--sc-ink));font:700 15px var(--display);font-variant-numeric:tabular-nums}
.scene .chip .l,.scene-teil .chip .l{fill:rgba(var(--sc-ink),.68);font:500 9.5px var(--body);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.scene .frame,.scene-teil .frame{fill:var(--sc-wall);stroke:rgba(var(--sc-ink),.22);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .frame.neu,.scene-teil .frame.neu{stroke:rgba(var(--sc-lime),.85)}
.scene .framegrund,.scene-teil .framegrund{stroke:rgba(var(--sc-ink),.3);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .mini,.scene-teil .mini{fill:rgba(var(--sc-lime),.55)}
.scene .minikran,.scene-teil .minikran{stroke:rgba(var(--sc-ink),.28);stroke-width:1;vector-effect:non-scaling-stroke}

/* ---------- 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(223,228,111,.08),transparent 60%),var(--bg)}
.lx-card{width:min(400px,100%);display:grid;gap:18px}
.mlogo{display:none;width:150px;height:auto}
.lx-kicker{margin:0 0 -6px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-text)}
.lx-kicker svg{flex:none}
.msg a{font-weight:600}
.sub a{color:var(--lime-text);font-weight:600;text-decoration:none}
.sub a:hover{text-decoration:underline;text-underline-offset:3px}
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:#eef1bf}
.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}
.lx-foot small a{text-decoration:underline;text-underline-offset:2px}
.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 blinken{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ablauf{to{stroke-dashoffset:-16}}
@keyframes rotor{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
@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}
	.lx-card > *:nth-child(9){animation-delay:.32s}
	.scene{animation:fadeIn 1.2s ease both}
	.lx-copy{animation:lxIn .7s .1s both}
.scene .tw,.scene-teil .tw{animation:twinkle 7s ease-in-out infinite}
.scene .led,.scene-teil .led{animation:blinken 4s ease-in-out infinite}
.scene .warnlicht,.scene-teil .warnlicht{animation:blinken 1.6s ease-in-out infinite}
.scene .rotor,.scene-teil .rotor{animation:rotor .09s linear infinite alternate}
.scene .rotor.r2,.scene-teil .rotor.r2{animation-delay:-.045s}
.scene .drohne-led,.scene-teil .drohne-led{animation:blinken 1.1s ease-in-out infinite}
.scene .funk,.scene-teil .funk{animation:ablauf 3s linear infinite}
	.lx-live[data-zustand="ereignis"] i{animation:blinken 1.4s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
.scene .win,.scene-teil .win,.scene .bau,.scene-teil .bau{transition:none}
}

/* ---------- Helles Thema: Bühne und Meldungen ---------- */
:root[data-thema="hell"] .lx-stage::after{background:radial-gradient(72% 72% at 0% 100%,rgba(230,232,220,.92) 22%,rgba(230,232,220,.45) 60%,rgba(230,232,220,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-copy::before{background:radial-gradient(closest-side,rgba(230,232,220,.95),rgba(230,232,220,.7) 55%,rgba(230,232,220,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:#6b7614}
: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,:root[data-thema="hell"] .scene-teil .snowcap{stroke:rgba(255,255,255,.95)}
:root[data-thema="hell"] .scene .flake,:root[data-thema="hell"] .scene-teil .flake{fill:rgba(120,134,110,.35)}
:root[data-thema="hell"] .scene .mt.back,:root[data-thema="hell"] .scene-teil .mt.back{stroke:rgba(110,118,18,.22)}
:root[data-thema="hell"] .scene .mt.front,:root[data-thema="hell"] .scene-teil .mt.front{stroke:rgba(110,118,18,.36)}
:root[data-thema="hell"] .scene .mt.snow,:root[data-thema="hell"] .scene-teil .mt.snow{stroke:rgba(28,36,20,.45)}
:root[data-thema="hell"] .lx-panel{background:radial-gradient(90% 60% at 100% 0%,rgba(223,228,111,.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:#4d5610}
: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:#5f6a12}
: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"] .scene .win.lit,:root[data-thema="hell"] .scene-teil .win.lit{fill:rgba(223,228,111,.38)}
:root[data-thema="hell"] .lx-live[data-zustand="ereignis"]{border-color:var(--warn-line)}
:root[data-thema="hell"] .lx-live[data-zustand="ereignis"] i{background:#b07000}
:root[data-thema="hell"] .scene .fov-a,:root[data-thema="hell"] .scene-teil .fov-a{stop-opacity:.26}

/* ---------- 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))}
}

/* ---------- Projekt Doku: Feinschliff ---------- */
.lx-copy img{width:300px}
:root[data-thema="hell"] .lx-copy img{width:280px}
:root[data-thema="hell"] .submit{box-shadow:inset 0 0 0 1px rgba(120,128,20,.35)}
:root[data-thema="hell"] .lx-claim span{color:#6b7614}
:root[data-thema="hell"] .scene .win.lit,:root[data-thema="hell"] .scene-teil .win.lit{fill:rgba(190,198,40,.35)}
.mlogo{width:210px}

/* Systemstatus: echte Ampelfarben statt Markenfarbe (grün = betriebsbereit) */
:root{--status-ok:#3ecf6a;--status-ok-soft:rgba(62,207,106,.2)}
:root[data-thema="hell"]{--status-ok:#1f9d4c;--status-ok-soft:rgba(31,157,76,.18)}
.lx-sys[data-state="ok"] i{background:var(--status-ok);box-shadow:0 0 0 3px var(--status-ok-soft)}
.lx-sys[data-state="ok"] .txt{color:var(--status-ok)}

/* ---------- Kameramonitor (Livebild, Filmstreifen, Zeitleiste) ---------- */
.scene .monitor-rahmen,.scene-teil .monitor-rahmen{fill:var(--sc-chip);stroke:rgba(var(--sc-ink),.2);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
:root[data-thema="hell"] .scene .monitor-rahmen,:root[data-thema="hell"] .scene-teil .monitor-rahmen{filter:drop-shadow(0 10px 22px rgba(40,44,30,.16))}
.scene .monitor .k.akzent,.scene-teil .monitor .k.akzent{fill:rgb(var(--sc-lime))}
.scene .live-dot,.scene-teil .live-dot{fill:rgb(var(--sc-rec))}
.scene .himmel-a,.scene-teil .himmel-a{stop-color:#0c0e0a}
.scene .himmel-b,.scene-teil .himmel-b{stop-color:#1a1c16}
:root[data-thema="hell"] .scene .himmel-a,:root[data-thema="hell"] .scene-teil .himmel-a{stop-color:#d9e1e6}
:root[data-thema="hell"] .scene .himmel-b,:root[data-thema="hell"] .scene-teil .himmel-b{stop-color:#eff1ea}
.scene .vignette-a,.scene-teil .vignette-a{stop-color:#000;stop-opacity:0}
.scene .vignette-b,.scene-teil .vignette-b{stop-color:#000;stop-opacity:.32}
:root[data-thema="hell"] .scene .vignette-b,:root[data-thema="hell"] .scene-teil .vignette-b{stop-opacity:.14}
.scene .schirm-rand,.scene-teil .schirm-rand{fill:none;stroke:rgba(var(--sc-ink),.28);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .schirm-blitz,.scene-teil .schirm-blitz{fill:#fff;opacity:0;transition:opacity .45s ease}
.scene .schirm-blitz.an,.scene-teil .schirm-blitz.an{opacity:.5;transition:none}
.scene .osd-ecken,.scene-teil .osd-ecken{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .osd-pille,.scene-teil .osd-pille{fill:rgba(8,9,7,.62)}
.scene .osd,.scene-teil .osd{fill:#f4f4ef;font:700 6.6px var(--body);letter-spacing:.1em}
.scene .osd.zahl,.scene-teil .osd.zahl{letter-spacing:.06em;font-variant-numeric:tabular-nums}
.scene .rec-dot,.scene-teil .rec-dot{fill:#ff4d3f}
.scene .vorschau,.scene-teil .vorschau{transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.scene .vorschau-rand,.scene-teil .vorschau-rand{fill:none;stroke:rgba(var(--sc-ink),.25);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .4s ease}
.scene .vorschau.neu .vorschau-rand,.scene-teil .vorschau.neu .vorschau-rand{stroke:rgb(var(--sc-lime));stroke-width:1.6}
.scene .luft-symbol,.scene-teil .luft-symbol{fill:none;stroke:#f4f4ef;stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scene .zaehler,.scene-teil .zaehler{fill:rgb(var(--sc-ink));font:700 12.5px var(--display);font-variant-numeric:tabular-nums}
.scene .leiste,.scene-teil .leiste{fill:rgba(var(--sc-ink),.12)}
.scene .leiste-voll,.scene-teil .leiste-voll{fill:rgb(var(--sc-lime));transition:width .8s ease}
.scene .leiste-marke,.scene-teil .leiste-marke{stroke:rgba(var(--sc-ink),.28);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .leiste-kopf,.scene-teil .leiste-kopf{fill:rgb(var(--sc-lime));stroke:var(--sc-chip);stroke-width:2;vector-effect:non-scaling-stroke;transition:cx .8s ease}
@media (prefers-reduced-motion:no-preference){
.scene .live-dot,.scene-teil .live-dot,.scene .rec-dot,.scene-teil .rec-dot{animation:blinken 1.2s ease-in-out infinite}
}