/* === MODUL: stil ===
   ZWECK:    Gemeinsames Aussehen aller Seiten (Anmelden, Start, WIP).
   EINGABE:  Klassen/IDs aus den .html-Seiten
   AUSGABE:  gestaltete, responsive Seiten
   BRAUCHT:  nichts
   BENUTZT VON: alle Seiten in seiten/
   === ENDE KOPF === */
:root{--bg:#0f1320;--flaeche:#1e2438;--rand:#2c3450;--ink:#eef1f8;--leise:#9aa3bd;
  --akzent:#5b8cff;--akzent2:#8a6bff;--gruen:#45c08a}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;color:var(--ink);min-height:100vh;line-height:1.55;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 500px at 80% -10%,rgba(138,107,255,.18),transparent 60%),
    radial-gradient(700px 400px at -10% 110%,rgba(91,140,255,.16),transparent 55%),var(--bg)}
.karte{background:linear-gradient(180deg,var(--flaeche),#171c2e);border:1px solid var(--rand);
  border-radius:18px;padding:30px 26px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.marke{font-weight:800;font-size:20px;margin-bottom:6px;letter-spacing:.3px}
.marke span{background:linear-gradient(90deg,var(--akzent),var(--akzent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo{font-size:40px;margin-bottom:8px}
h1{font-size:24px;margin-bottom:6px}
.unter{color:var(--leise);font-size:14px;margin-bottom:22px}
.tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--rand);border-radius:12px;
  padding:4px;margin-bottom:18px}
.tab{flex:1;padding:9px;border:0;border-radius:9px;cursor:pointer;background:transparent;
  color:var(--leise);font:700 14px system-ui}.tab-aktiv{background:var(--flaeche);color:var(--ink)}
.form{display:grid;gap:11px}.versteckt{display:none}
input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--rand);
  background:var(--bg);color:var(--ink);font-size:15px;outline:none}
input:focus{border-color:var(--akzent);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.knopf{padding:13px;border:0;border-radius:11px;cursor:pointer;font:800 16px system-ui;color:#fff;
  background:linear-gradient(180deg,var(--akzent),var(--akzent2));width:100%}
.knopf:hover{filter:brightness(1.07)}.knopf:active{transform:translateY(1px)}
.start{font-size:19px;padding:16px 40px;width:auto}
.meldung{min-height:20px;margin-top:12px;font-size:14px;font-weight:600;color:#ff6b6b}
.meldung.ok{color:var(--gruen)}
.gross{font-size:30px;margin-bottom:10px}
.link{margin-top:18px;font-size:13px}.link a{color:var(--akzent);text-decoration:none}
.spinner{width:42px;height:42px;border:4px solid var(--rand);border-top-color:var(--akzent);
  border-radius:50%;margin:18px auto;animation:dreh 1s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.balken{height:8px;background:var(--bg);border:1px solid var(--rand);border-radius:20px;
  overflow:hidden;margin:18px 0}
.balken-fuell{height:100%;width:62%;background:linear-gradient(90deg,var(--akzent),var(--akzent2));
  border-radius:20px;animation:puls 1.6s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.7}50%{opacity:1}}