/*
ExamTool Anmeldung – Redesign 10/2026
Aufbau nach der nytic-Familie (HEATCON, MiVaTool, AudioMonitor v2): Bühne links, Anmeldekarte rechts, hell/dunkel.
Farben aus ExamTool (Navy + Lime). Gilt für Anmelden, Passwort vergessen und Passwort setzen (Layout auth).
Thema: gleiche Wahl wie in der App (data-theme light|dark), ohne Wahl nach Systemeinstellung.
*/

/* ---------- Tokens: dunkel (Standard) ---------- */
:root{
	color-scheme:dark;
	--bg:#0a0f1f; --stage:#060a17; --stage-rgb:6,10,23; --field:#0d1328;
	--line:rgba(200,214,255,.09); --line2:rgba(200,214,255,.18); --line3:rgba(200,214,255,.3);
	--text:#eef2fb; --muted:#aab4cf; --faint:#7a85a3;
	--lime:#7dd321; --lime-hi:#9be22b; --lime-ink:#07101f; --lime-soft:rgba(125,211,33,.14); --lime-line:rgba(125,211,33,.5); --lime-text:#9be22b;
	--warn:#f2b84b; --warn-soft:rgba(242,184,75,.13); --warn-line:rgba(242,184,75,.45);
	--crit:#ff6b6b; --crit-soft:rgba(255,107,107,.14); --crit-line:rgba(255,107,107,.42);
	--msg-error:#ffd5d5; --msg-success:#dcf3b8; --msg-info:#dde4f5; --msg-warn:#fbe5b8; --hint-err:#ff9a9a;
	--claim:#fff; --claim-accent:#7dd321; --lede:#c3cbe0; --facts:#8f99b6; --facts-line:rgba(255,255,255,.12);
	--live-bg:rgba(8,13,30,.74); --live-line:rgba(255,255,255,.12); --live-text:#d3d9ea;
	--hover-bg:rgba(255,255,255,.05);
	--display:"Thasadith","Century Gothic","Avenir Next",sans-serif;
	--body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
	--mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
	/* Szene */
	--sc-ink:232,238,252; --sc-lime:125,211,33; --sc-warm:242,184,75; --sc-blue:124,155,255;
	--sc-wall:#080d1d; --sc-slab:#0c1226; --sc-screen:#0a1330; --sc-chip:rgba(9,14,32,.93);
}
/* ---------- Tokens: hell (Wahl oder Systemeinstellung) ---------- */
:root[data-theme="light"]{
	color-scheme:light;
	--bg:#f1f4fa; --stage:#e3e8f2; --stage-rgb:227,232,242; --field:#fbfcfe;
	--line:rgba(15,26,54,.11); --line2:rgba(15,26,54,.2); --line3:rgba(15,26,54,.34);
	--text:#0f1a36; --muted:#4a5677; --faint:#68728f;
	--lime-soft:rgba(125,211,33,.17); --lime-line:rgba(70,130,10,.5); --lime-text:#3f7a0a;
	--warn:#8a5a00; --warn-soft:rgba(242,184,75,.2); --warn-line:rgba(160,110,0,.45);
	--crit:#c62f2f; --crit-soft:rgba(211,59,59,.09); --crit-line:rgba(198,47,47,.4);
	--msg-error:#a32222; --msg-success:#33620a; --msg-info:#0f1a36; --msg-warn:#6b4700; --hint-err:#b42318;
	--claim:#0f1a36; --claim-accent:#4a8a0c; --lede:#3a4566; --facts:#5a6585; --facts-line:rgba(15,26,54,.14);
	--live-bg:rgba(251,252,254,.8); --live-line:rgba(15,26,54,.12); --live-text:#3a4566;
	--hover-bg:rgba(15,26,54,.06);
	--sc-ink:15,26,54; --sc-lime:70,140,10; --sc-warm:176,112,0; --sc-blue:30,58,138;
	--sc-wall:#edf0f7; --sc-slab:#e1e6f0; --sc-screen:#ffffff; --sc-chip:rgba(251,252,254,.95);
}
@media (prefers-color-scheme:light){
	:root:not([data-theme="dark"]){
		color-scheme:light;
		--bg:#f1f4fa; --stage:#e3e8f2; --stage-rgb:227,232,242; --field:#fbfcfe;
		--line:rgba(15,26,54,.11); --line2:rgba(15,26,54,.2); --line3:rgba(15,26,54,.34);
		--text:#0f1a36; --muted:#4a5677; --faint:#68728f;
		--lime-soft:rgba(125,211,33,.17); --lime-line:rgba(70,130,10,.5); --lime-text:#3f7a0a;
		--warn:#8a5a00; --warn-soft:rgba(242,184,75,.2); --warn-line:rgba(160,110,0,.45);
		--crit:#c62f2f; --crit-soft:rgba(211,59,59,.09); --crit-line:rgba(198,47,47,.4);
		--msg-error:#a32222; --msg-success:#33620a; --msg-info:#0f1a36; --msg-warn:#6b4700; --hint-err:#b42318;
		--claim:#0f1a36; --claim-accent:#4a8a0c; --lede:#3a4566; --facts:#5a6585; --facts-line:rgba(15,26,54,.14);
		--live-bg:rgba(251,252,254,.8); --live-line:rgba(15,26,54,.12); --live-text:#3a4566;
		--hover-bg:rgba(15,26,54,.06);
		--sc-ink:15,26,54; --sc-lime:70,140,10; --sc-warm:176,112,0; --sc-blue:30,58,138;
		--sc-wall:#edf0f7; --sc-slab:#e1e6f0; --sc-screen:#ffffff; --sc-chip:rgba(251,252,254,.95);
	}
}

*{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}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-size:.92em}

.lx{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(400px,.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% 72%,rgba(var(--sc-lime),.08),transparent 70%),radial-gradient(50% 40% at 90% 10%,rgba(var(--sc-blue),.09),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(var(--stage-rgb),.9) 22%,rgba(var(--stage-rgb),.42) 60%,rgba(var(--stage-rgb),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:var(--live-bg);border:1px solid var(--live-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12.5px;color:var(--live-text);transition:border-color .3s ease}
.lx-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-soft);flex:none;transition:background .3s ease,box-shadow .3s ease}
.lx-live[data-zustand="offline"]{border-color:var(--warn-line)}
.lx-live[data-zustand="offline"] i{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.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(var(--stage-rgb),.94),rgba(var(--stage-rgb),.7) 55%,rgba(var(--stage-rgb),0))}
.lx-logo{display:block;color:var(--claim);margin-bottom:clamp(18px,4.5vh,40px)}
.lx-logo svg,.mlogo svg{display:block;width:230px;height:auto}
.lx-claim{margin:0;font:700 clamp(36px,3.5vw,60px)/1.02 var(--display);letter-spacing:-.02em;color:var(--claim)}
.lx-claim span{display:block;color:var(--claim-accent)}
.lx-lede{margin:18px 0 0;max-width:46ch;color:var(--lede);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 var(--facts-line)}
.lx-facts li{display:grid;gap:3px;color:var(--facts);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lx-facts b{font:700 28px/1 var(--display);color:var(--claim);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 .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),.14)}
.scene .mt.front{stroke:rgba(var(--sc-lime),.25)}
.scene .mt.snow{stroke:rgba(var(--sc-ink),.42)}
.scene .node{fill:rgba(var(--sc-lime),.7)}
.scene .node.back{fill:rgba(var(--sc-lime),.36)}
.scene .star{fill:rgba(var(--sc-ink),.5)}
/* Pult, Laptop, Bücher */
.scene .desk{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.5)}
.scene .book{fill:var(--sc-wall);stroke:rgba(var(--sc-ink),.45)}
.scene .book.lime{fill:rgba(var(--sc-lime),.14);stroke:rgba(var(--sc-lime),.6)}
.scene .book.blue{fill:rgba(var(--sc-blue),.12);stroke:rgba(var(--sc-blue),.55)}
.scene .bezel{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55);stroke-width:1.4;vector-effect:non-scaling-stroke}
.scene .screen{fill:var(--sc-screen);stroke:rgba(var(--sc-ink),.25);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .bar{fill:rgba(var(--sc-blue),.16)}
.scene .txtbar{fill:rgba(var(--sc-ink),.14)}
.scene .txtbar.strong{fill:rgba(var(--sc-ink),.32)}
.scene .ui-k{fill:rgba(var(--sc-ink),.6);font:600 7.5px var(--body);letter-spacing:.14em}
.scene .ui-v{fill:rgb(var(--sc-ink));font:700 13px var(--display);font-variant-numeric:tabular-nums}
.scene .pill{fill:rgba(var(--sc-lime),.14);stroke:rgba(var(--sc-lime),.7);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .4s ease,stroke .4s ease}
.scene .pill-t{fill:rgb(var(--sc-lime));font:700 10px var(--display);font-variant-numeric:tabular-nums;transition:fill .4s ease}
.scene .seg{fill:rgba(var(--sc-ink),.12);transition:fill .5s ease}
.scene .seg.done{fill:rgba(var(--sc-lime),.8)}
.scene .seg.now{fill:rgba(var(--sc-blue),.75)}
.scene .opt{fill:transparent;stroke:rgba(var(--sc-ink),.2);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .35s ease,stroke .35s ease}
.scene .opt.sel{fill:rgba(var(--sc-lime),.1);stroke:rgba(var(--sc-lime),.85)}
.scene .radio{fill:var(--sc-screen);stroke:rgba(var(--sc-ink),.45);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .35s ease}
.scene .opt.sel + .radio{stroke:rgb(var(--sc-lime))}
.scene .dot{fill:rgb(var(--sc-lime));transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .3s cubic-bezier(.2,.8,.2,1.4)}
.scene .dot.on{transform:scale(1)}
.scene .btn-t{fill:rgb(var(--sc-lime));font-size:7px;letter-spacing:.12em}
.scene .save{fill:rgba(var(--sc-ink),.55);font:600 8px var(--body);letter-spacing:.06em;transition:fill .3s ease}
.scene .save.ok{fill:rgb(var(--sc-lime))}
.scene .save.wait{fill:rgb(var(--sc-warm))}
.scene .cursor{fill:rgb(var(--sc-ink));stroke:var(--sc-screen);stroke-width:1;vector-effect:non-scaling-stroke;transition:transform .9s cubic-bezier(.45,0,.2,1)}
.scene .base{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.55);stroke-width:1.4;vector-effect:non-scaling-stroke}
/* Server im Rack */
.scene .rack{fill:var(--sc-wall);stroke:rgba(var(--sc-ink),.55);stroke-width:1.4;vector-effect:non-scaling-stroke}
.scene .unit{fill:var(--sc-slab);stroke:rgba(var(--sc-ink),.4);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .3s ease,stroke .3s ease}
.scene .unit.empfang{fill:rgba(var(--sc-lime),.16);stroke:rgb(var(--sc-lime))}
.scene .led{fill:rgb(var(--sc-lime))}
.scene .led.b{fill:rgba(var(--sc-blue),.9)}
.scene .vent{stroke:rgba(var(--sc-ink),.22);stroke-width:1;vector-effect:non-scaling-stroke}
.scene .rtxt{fill:rgba(var(--sc-ink),.72);font:600 7px var(--body);letter-spacing:.14em}
.scene .cable{fill:none;stroke:rgba(var(--sc-ink),.24);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene .flow{fill:none;stroke:rgba(var(--sc-lime),.85);stroke-width:1.4;stroke-dasharray:2 10;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene.offline .flow{opacity:.15}
.scene .ring{fill:none;stroke:rgba(var(--sc-lime),.9);stroke-width:1.3;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ringAus .9s ease-out forwards}
@keyframes ringAus{from{transform:scale(1);opacity:1}to{transform:scale(6);opacity:0}}
.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 .wlan{fill:none;stroke:rgba(var(--sc-lime),.85);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .3s ease,opacity .3s ease}
.scene.offline .wlan{stroke:rgba(var(--sc-warm),.9);opacity:.35}
.scene .wlan-x{fill:none;stroke:rgb(var(--sc-warm));stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s ease}
.scene.offline .wlan-x{opacity:1}
.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.warm .bg{stroke:rgba(var(--sc-warm),.9)}
.scene .chip.warm .d,.scene .chip.warm .v{fill:rgb(var(--sc-warm))}
.scene.offline .pill{fill:rgba(var(--sc-warm),.14);stroke:rgba(var(--sc-warm),.7)}

/* ---------- 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(var(--sc-lime),.08),transparent 60%),var(--bg)}
.lx-card{width:min(420px,100%);display:grid;gap:18px}
.mlogo{display:none;color:var(--text);width:fit-content;border-radius:8px}
.mlogo svg{width:128px}
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 .icon{margin-top:1px}
.msg-error{background:var(--crit-soft);border-color:var(--crit-line);color:var(--msg-error)}
.msg-error .icon{color:var(--crit)}
.msg-success{background:var(--lime-soft);border-color:var(--lime-line);color:var(--msg-success)}
.msg-success .icon{color:var(--lime-text)}
.msg-info{background:var(--hover-bg);border-color:var(--line2);color:var(--msg-info)}
.msg-info .icon{color:var(--lime-text)}
.msg-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--msg-warn)}
.msg-warn .icon{color:var(--warn)}
.msg a{color:inherit}

/* Umschalter Lernende / Lehrperson */
.lx-tabs{display:grid;gap:18px}
.lx-tabs > input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.lx-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line2);background:var(--field)}
.lx-switch label{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;cursor:pointer;user-select:none;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.lx-switch label:hover{color:var(--text);background:var(--hover-bg)}
#tab-student:checked ~ .lx-switch label[for="tab-student"],
#tab-teacher:checked ~ .lx-switch label[for="tab-teacher"]{background:var(--lime-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--lime-line)}
#tab-student:checked ~ .lx-switch label[for="tab-student"] .icon,
#tab-teacher:checked ~ .lx-switch label[for="tab-teacher"] .icon{color:var(--lime-text)}
#tab-student:focus-visible ~ .lx-switch label[for="tab-student"],
#tab-teacher:focus-visible ~ .lx-switch label[for="tab-teacher"]{outline:2px solid var(--lime);outline-offset:2px}
.lx-pane{display:none;gap:18px}
#tab-student:checked ~ .p-student,#tab-teacher:checked ~ .p-teacher{display:grid}

form{display:grid;gap:14px}
.field{display:grid;gap:6px;min-width:0}
.lx-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lx-field{position:relative}
.lx-field .input{width:100%;height:56px;padding:22px 14px 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.code{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.16em}
.lx-field .input:hover{border-color:var(--line3)}
.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;right:12px;top:17px;color:var(--faint);font-size:15px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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:19px;color:var(--faint);pointer-events:none;transition:color .15s ease}
.lx-field .input:focus ~ .ico{color:var(--lime-text)}
.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:var(--hover-bg)}
.eye:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.eye .icon{width:20px;height:20px}
.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:var(--hint-err)}

/* 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:6.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-caps .icon{width:14px;height:14px}

.submit{height:54px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;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 .arrow .icon{stroke-width:2.2}
.submit:hover .arrow{transform:translateX(3px)}
.submit:disabled{cursor:progress;opacity:.8}
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(7,16,31,.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}

.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}

.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{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;border-radius:4px}
.lx-back a:hover{color:var(--text)}
.lx-back .icon{width:16px;height:16px}
.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: Mond im dunklen, Sonne im hellen Thema */
.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-theme="light"] .thema-knopf .ic-mond{display:none}
:root[data-theme="light"] .thema-knopf .ic-sonne{display:block}
@media (prefers-color-scheme:light){
	:root:not([data-theme="dark"]) .thema-knopf .ic-mond{display:none}
	:root:not([data-theme="dark"]) .thema-knopf .ic-sonne{display:block}
}

/* ---------- 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 blinken{0%,100%{opacity:1}50%{opacity:.3}}
@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}
	.lx-pane{animation:lxIn .35s both}
	.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 3s linear infinite}
	.scene .led{animation:blinken 3.2s ease-in-out infinite}
	.scene .led.b{animation-duration:1.7s}
	.scene .chip.sendet .d{animation:senden 1s ease-in-out}
	.lx-live[data-zustand="offline"] i{animation:blinken 1.2s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
	.scene .opt,.scene .dot,.scene .seg,.scene .cursor{transition:none}
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1180px),(max-height:820px){
	.lx-lede{display:none}
}
@media (max-width:900px){
	.lx{grid-template-columns:1fr}
	.lx-stage{min-height:220px;height:34vh;border-right:0;border-bottom:1px solid rgba(var(--sc-ink),.06)}
	.lx-live{display:none}
	.lx-copy{bottom:20px;width:auto;right:42%}
	.lx-logo,.lx-facts{display:none !important}
	.lx-claim{font-size:clamp(26px,7vw,44px)}
	.lx-claim span{white-space:nowrap}
	.mlogo{display:block}
	.lx-panel{place-items:start center}
}
@media (max-width:420px){
	.lx-pair{grid-template-columns:1fr}
	.lx-switch label{font-size:13.5px;gap:6px}
}