:root{
  /* Farbthemen aus dem HUB-Dashboard (EF-Portal-Familie). Standard = Dunkelblau. */
  --bg:#0f1218; --bg-card:#1a1f2b; --bg-card-hover:#232938;
  --fg:#e8eaee; --fg-muted:#9aa0ac;
  --accent:#3b82f6; --accent-hover:#2563eb; --accent-fg:#ffffff;
  --success:#16a34a; --warning:#f59e0b; --error:#ef4444;
  --border:#2a3142; --radius:14px; --shadow:0 4px 12px rgba(0,0,0,.3);
  color-scheme:dark;
}
html[data-theme="hell"],html[data-theme="beige"],html[data-theme="kontrast"]{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--fg)}

.bar{display:flex;align-items:center;gap:14px;padding:12px 20px;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-size:17px}
.controls{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.badge{font-size:12px;color:var(--fg-muted);border:1px solid var(--border);border-radius:20px;padding:4px 12px}
.themesel,select,input{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit}
.themesel{max-width:150px}
.efui{display:inline-flex;gap:8px;align-items:center}
.efui-sel{max-width:140px}
.btn{background:var(--bg-card-hover);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font:inherit}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-hover)}

/* Launchpad */
.lp{max-width:960px;margin:0 auto;padding:48px 24px 90px}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;justify-items:center}
.lp-empty{color:var(--fg-muted);margin-top:20px;text-align:center}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;text-align:center;width:100%;max-width:250px;min-height:172px;border-radius:18px;padding:26px 20px;color:var(--fg);text-decoration:none;box-shadow:0 0 16px -5px color-mix(in srgb,var(--accent) 50%,transparent),var(--shadow);transition:transform .16s ease,box-shadow .2s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 0 26px -3px color-mix(in srgb,var(--accent) 65%,transparent),0 14px 32px rgba(0,0,0,.28)}
/* Licht läuft am Rand entlang: rotierender Conic-Gradient + innere Maske (läuft in jedem Browser) */
.tile::before{content:"";position:absolute;z-index:0;inset:-55%;background:conic-gradient(from 0deg,transparent 0 70%,var(--accent) 82%,#fff 90%,var(--accent) 96%,transparent 100%);animation:tile-spin 4s linear infinite}
.tile::after{content:"";position:absolute;z-index:1;inset:2px;border-radius:inherit;background:var(--bg-card)}
.tile:hover::after{background:var(--bg-card-hover)}
.tile>*{position:relative;z-index:2}
@keyframes tile-spin{to{transform:rotate(1turn)}}
.tile-icon{width:74px;height:74px;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--bg-card));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 0 12px -4px color-mix(in srgb,var(--accent) 55%,transparent)}
.tile-name{font-size:18px;font-weight:700;letter-spacing:.2px}
@media(prefers-reduced-motion:reduce){.tile::before{animation:none}}
/* Style-Varianten greifen Layout + Farbe auf */
html[data-style="glass"] .tile::after{background:color-mix(in srgb,var(--bg-card) 48%,transparent);backdrop-filter:blur(14px) saturate(1.4)}
html[data-style="glass"] .tile:hover::after{background:color-mix(in srgb,var(--bg-card-hover) 48%,transparent)}
html[data-style="glass"] .tile-icon{background:color-mix(in srgb,var(--accent) 18%,transparent)}
html[data-style="terminal"] .tile{border-radius:4px}
html[data-style="terminal"] .tile-name{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:0}
html[data-style="kompakt"] .tile{min-height:150px;padding:20px 16px;gap:12px;max-width:210px}
html[data-style="kompakt"] .tile-icon{width:60px;height:60px;font-size:30px}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;width:340px;max-width:92vw;display:flex;flex-direction:column;gap:12px}
.login-brand{font-size:22px;text-align:center}
.login-sub{color:var(--fg-muted);text-align:center;font-size:13px;margin-top:-6px}
.login-card input{width:100%}
.login-card .btn{justify-content:center;width:100%;padding:11px}
.login-msg{background:color-mix(in srgb,var(--error) 16%,var(--bg));border:1px solid var(--error);color:var(--fg);border-radius:8px;padding:8px 10px;font-size:13px}

/* ===== Nutzerverwaltung ===== */
.admin{display:grid;grid-template-columns:300px 1fr;gap:18px;max-width:1100px;margin:0 auto;padding:22px 20px 80px}
@media(max-width:760px){.admin{grid-template-columns:1fr}}
.admin-list{display:flex;flex-direction:column;gap:10px}
.user-list{display:flex;flex-direction:column;gap:6px}
.user-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer;text-align:left;color:var(--fg);font:inherit}
.user-item:hover{border-color:var(--accent)}
.user-item.active{border-color:var(--accent);background:var(--bg-card-hover)}
.ui-name{font-weight:600}.ui-sub{font-size:12px;color:var(--fg-muted)}
.admin-edit{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);min-height:200px}
.ed-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ed-head h2{margin:0;font-size:19px}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:14px 0 6px}
.ed-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--fg-muted)}
.ed-grid label.chk{flex-direction:row;align-items:center;gap:8px;color:var(--fg)}
.ed-grid input[type=text],.ed-grid input:not([type]){width:100%}
.ed-sub{margin:18px 0 8px;font-size:15px}
.appblocks{display:flex;flex-direction:column;gap:10px}
.appblock{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--bg)}
.appblock.on{border-color:var(--accent)}
.ab-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:15px}
.ab-ic{font-size:18px}
.ab-body{margin-top:8px;padding-left:4px;display:none;flex-direction:column;gap:8px}
.appblock.on .ab-body{display:flex}
.ab-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-l{font-size:12px;color:var(--fg-muted);min-width:84px}
.rbs{display:flex;gap:12px;flex-wrap:wrap}
.rb,.cb{display:inline-flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
.std-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;width:100%;padding-left:94px}
.std-grid.dim{opacity:.4;pointer-events:none}
.cb.std{font-size:12px}
.ed-actions{display:flex;align-items:center;gap:12px;margin-top:18px}
.ed-msg{font-size:13px}.ed-msg.ok{color:var(--success)}.ed-msg.err{color:var(--error)}

/* ===== Farbthemen (HUB-Dashboard) ===== */
html[data-theme="hell"]{--bg:#eef1f6;--bg-card:#ffffff;--bg-card-hover:#eef2f8;--fg:#1b2430;--fg-muted:#5b6675;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-fg:#ffffff;--success:#15803d;--warning:#b45309;--error:#dc2626;--border:#d7dee9;--shadow:0 4px 12px rgba(20,30,50,.10)}
html[data-theme="beige"]{--bg:#f4eee2;--bg-card:#fbf8f1;--bg-card-hover:#efe7d8;--fg:#4a443b;--fg-muted:#8e8676;--accent:#46b3a9;--accent-hover:#3a9b91;--accent-fg:#0d2b28;--success:#4f9e74;--warning:#bf8a3e;--error:#c25b4f;--border:#e6dcca;--shadow:0 4px 16px rgba(120,100,70,.12)}
html[data-theme="dunkel"]{--bg:#0d0e10;--bg-card:#17191d;--bg-card-hover:#1f2226;--fg:#d3d6db;--fg-muted:#868b93;--accent:#6cae9e;--accent-hover:#5b9a8b;--accent-fg:#0d0e10;--success:#67b58c;--warning:#c8a667;--error:#cf8585;--border:#262a30;--shadow:0 4px 14px rgba(0,0,0,.5)}
html[data-theme="bunt"]{--bg:#141225;--bg-card:#1f1b36;--bg-card-hover:#2a2447;--fg:#f1ecff;--fg-muted:#ada3c9;--accent:#4f8cff;--accent-hover:#6f6bff;--accent-fg:#ffffff;--success:#22c55e;--warning:#f59e0b;--error:#fb7185;--border:#352c52;--shadow:0 6px 22px rgba(60,40,150,.34)}
html[data-theme="bunt"] body{background:radial-gradient(820px 520px at 8% -6%,rgba(79,140,255,.24),transparent 60%),radial-gradient(820px 520px at 96% -2%,rgba(255,138,76,.20),transparent 58%),radial-gradient(820px 560px at 102% 62%,rgba(168,85,247,.18),transparent 60%),radial-gradient(820px 560px at -4% 70%,rgba(34,211,238,.18),transparent 60%),radial-gradient(900px 560px at 50% 116%,rgba(34,197,94,.16),transparent 60%),var(--bg);background-attachment:fixed}
html[data-theme="nacht"]{--bg:#15120d;--bg-card:#201b13;--bg-card-hover:#2b2418;--fg:#ece3d2;--fg-muted:#a99c84;--accent:#e0a44e;--accent-hover:#c98f3c;--accent-fg:#1a1408;--success:#8fbf6a;--warning:#d99a3a;--error:#d97a5e;--border:#322a1d;--shadow:0 4px 16px rgba(0,0,0,.55)}
html[data-theme="kontrast"]{--bg:#ffffff;--bg-card:#ffffff;--bg-card-hover:#eaeaea;--fg:#000000;--fg-muted:#1f1f1f;--accent:#0033cc;--accent-hover:#002299;--accent-fg:#ffffff;--success:#006b1f;--warning:#8a5300;--error:#c00000;--border:#333333;--shadow:0 2px 6px rgba(0,0,0,.25)}
html[data-theme="matrix"]{--bg:#000600;--bg-card:#02140a;--bg-card-hover:#04250f;--fg:#b7ffc4;--fg-muted:#4caf63;--accent:#00ff41;--accent-hover:#00cc34;--accent-fg:#001a06;--success:#00ff41;--warning:#d7ff00;--error:#ff5555;--border:#0c4a1a;--shadow:0 4px 18px rgba(0,255,65,.18)}
html[data-theme="azeroth"]{--bg:#0a0f1a;--bg-card:#121a2b;--bg-card-hover:#1b2640;--fg:#f4e4c1;--fg-muted:#b89c6a;--accent:#f8b700;--accent-hover:#d99e00;--accent-fg:#1a1200;--success:#1eff00;--warning:#ff8000;--error:#ff4040;--border:#2c3a5a;--shadow:0 4px 18px rgba(248,183,0,.18)}
html[data-theme="horde"]{--bg:#100604;--bg-card:#1e0c08;--bg-card-hover:#2c120c;--fg:#f1d9cf;--fg-muted:#b8897c;--accent:#c41f1f;--accent-hover:#a01818;--accent-fg:#ffe9e0;--success:#6abe30;--warning:#e0a020;--error:#ff5340;--border:#3a1a12;--shadow:0 4px 18px rgba(196,31,31,.22)}
html[data-theme="synthwave"]{--bg:#1a0b2e;--bg-card:#241141;--bg-card-hover:#321a57;--fg:#ffe6ff;--fg-muted:#c79bd6;--accent:#ff2bd6;--accent-hover:#e018bd;--accent-fg:#1a0b2e;--success:#05ffa1;--warning:#ffd319;--error:#ff5e7e;--border:#3d2363;--shadow:0 4px 20px rgba(255,43,214,.22)}
html[data-theme="dracula"]{--bg:#282a36;--bg-card:#343746;--bg-card-hover:#404456;--fg:#f8f8f2;--fg-muted:#9ea0b0;--accent:#bd93f9;--accent-hover:#a875f5;--accent-fg:#1a1b24;--success:#50fa7b;--warning:#f1fa8c;--error:#ff5555;--border:#44475a;--shadow:0 4px 16px rgba(20,20,30,.5)}
html[data-theme="tron"]{--bg:#00060a;--bg-card:#021018;--bg-card-hover:#04222e;--fg:#d6f7ff;--fg-muted:#5fa9bd;--accent:#00e5ff;--accent-hover:#00bcd4;--accent-fg:#001318;--success:#00ffd0;--warning:#ffcc00;--error:#ff4d6d;--border:#0a3a48;--shadow:0 4px 18px rgba(0,229,255,.2)}

/* ===== Bewegliche Bereichs-Icons (Stil A — funktional bewegt) ===== */
.tile-icon.has-svg{background:color-mix(in srgb,var(--a,var(--accent)) 16%,var(--bg-card));border-color:color-mix(in srgb,var(--a,var(--accent)) 45%,var(--border));box-shadow:0 0 12px -4px color-mix(in srgb,var(--a,var(--accent)) 55%,transparent)}
.tile-icon .pi{width:46px;height:46px;display:block}
.tile-icon .st{fill:none;stroke:var(--a,var(--accent));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tile-icon .fillA{fill:var(--a,var(--accent))}
.tile-icon .boxfill{fill:color-mix(in srgb,var(--a,var(--accent)) 25%,transparent)}
.tile-icon .pinfill{fill:color-mix(in srgb,var(--a,var(--accent)) 30%,transparent)}
.tile-icon .mapbg{opacity:.5}
.tile-icon .truck{animation:pi-bob 1.1s ease-in-out infinite}
.tile-icon .wheel{transform-box:fill-box;transform-origin:center;animation:pi-spin 1.1s linear infinite}
.tile-icon .speed{animation:pi-dash 1s linear infinite}
.tile-icon .speed.d2{animation-delay:.2s}
.tile-icon .gearA{transform-box:fill-box;transform-origin:center;animation:pi-spin 3.2s linear infinite}
.tile-icon .gearB{transform-box:fill-box;transform-origin:center;animation:pi-spinr 2.4s linear infinite}
.tile-icon .box{transform-box:fill-box;transform-origin:center;animation:pi-drop 1.8s ease-in-out infinite}
.tile-icon .route{stroke-dasharray:70;stroke-dashoffset:70;animation:pi-draw 2.4s ease-in-out infinite}
.tile-icon .dot{offset-path:path('M14 46 Q24 26 34 34 T52 18');animation:pi-along 2.4s ease-in-out infinite}
.tile-icon .pin{transform-box:fill-box;transform-origin:center bottom;animation:pi-pulse 1.6s ease-in-out infinite}
.tile-icon .bubblefill{fill:color-mix(in srgb,var(--a,var(--accent)) 14%,transparent)}
.tile-icon .chat{transform-box:fill-box;transform-origin:center;animation:pi-bob 1.6s ease-in-out infinite}
.tile-icon .typ{transform-box:fill-box;transform-origin:center;animation:pi-type 1.3s ease-in-out infinite}
.tile-icon .typ.t2{animation-delay:.18s}
.tile-icon .typ.t3{animation-delay:.36s}
@keyframes pi-type{0%,100%{opacity:.3;transform:translateY(1px)}45%{opacity:1;transform:translateY(-1.5px)}}
@keyframes pi-spin{to{transform:rotate(360deg)}}
@keyframes pi-spinr{to{transform:rotate(-360deg)}}
@keyframes pi-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes pi-dash{0%{transform:translateX(3px);opacity:0}40%{opacity:.8}100%{transform:translateX(-8px);opacity:0}}
@keyframes pi-drop{0%{transform:translateY(-16px);opacity:0}25%{opacity:1}55%,100%{transform:translateY(0);opacity:1}}
@keyframes pi-draw{0%{stroke-dashoffset:70}55%,100%{stroke-dashoffset:0}}
@keyframes pi-along{0%{offset-distance:0%}55%,100%{offset-distance:100%}}
@keyframes pi-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
html[data-style="kompakt"] .tile-icon .pi{width:40px;height:40px}
@media(prefers-reduced-motion:reduce){.tile-icon .truck,.tile-icon .wheel,.tile-icon .speed,.tile-icon .gearA,.tile-icon .gearB,.tile-icon .box,.tile-icon .route,.tile-icon .dot,.tile-icon .pin,.tile-icon .chat,.tile-icon .typ{animation:none}.tile-icon .route{stroke-dashoffset:0}.tile-icon .typ{opacity:1}}

/* --- Passwort-Flows (Login-Footer, Erfolgsmeldung, Konto-Modal) --- */
.login-msg.ok{background:color-mix(in srgb,var(--success) 16%,var(--bg));border-color:var(--success)}
.login-foot{text-align:center;font-size:13px;margin-top:2px}
.login-foot a{color:var(--fg-muted);text-decoration:none}
.login-foot a:hover{color:var(--accent);text-decoration:underline}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-back[hidden]{display:none}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;width:400px;max-width:94vw;display:flex;flex-direction:column;gap:12px}
.modal h2{margin:0;font-size:18px}
.modal .row{display:flex;flex-direction:column;gap:4px}
.modal label{font-size:12px;color:var(--fg-muted)}
.modal input{width:100%}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.modal .hint{font-size:12px;color:var(--fg-muted)}
.msg{border-radius:8px;padding:8px 10px;font-size:13px}
.msg.err{background:color-mix(in srgb,var(--error) 16%,var(--bg));border:1px solid var(--error)}
.msg.ok{background:color-mix(in srgb,var(--success) 16%,var(--bg));border:1px solid var(--success)}