/* Anmelden, Einrichten, Laden und Speicherstand – nutzt die Farben der Oberfläche */
#tor{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:var(--bg,#f6f8fb);font-family:var(--schrift,system-ui)}
#tor[hidden]{display:none}
.tor-karte{width:100%;max-width:380px;background:var(--flaeche,#fff);border:1px solid var(--linie,#e2e8f0);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;color:var(--text,#14212e)}
.tor-karte form{display:flex;flex-direction:column;gap:12px}
.tor-marke{font-weight:700;font-size:24px;color:var(--text)}
.tor-marke small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer,#d34100);margin-left:4px}
.tor-fehler{background:var(--fehler-hell,#f8e1df);color:var(--fehler,#b3372f);border-radius:8px;padding:10px 12px;font-size:14px}
.tor-laden{display:flex;flex-direction:column;gap:12px;color:var(--leise,#4c5c6b);font-size:14px}
.ladebalken{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--kupfer,#d34100) 0 30%,var(--linie,#e2e8f0) 30%);background-size:200% 100%;animation:wbl-lade 1.2s linear infinite}
@keyframes wbl-lade{from{background-position:100% 0}to{background-position:-100% 0}}
.wbl-status{position:fixed;right:12px;bottom:12px;z-index:900;font:500 12px var(--schrift,system-ui);padding:6px 10px;border-radius:999px;background:var(--flaeche,#fff);color:var(--leise,#4c5c6b);border:1px solid var(--linie,#e2e8f0);opacity:0;transition:opacity .3s;pointer-events:none}
.wbl-status[data-z="speichert"],.wbl-status[data-z="gespeichert"]{opacity:1}
.wbl-status[data-z="offline"]{opacity:1;background:var(--warn-hell,#fbefd6);color:var(--warn,#a86a00);border-color:transparent}
@media (max-width:820px){.wbl-status{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media print{.wbl-status,#tor{display:none!important}}