/* ==========================================================================
   Karte auf leerer Flaeche - fuer Anmelden und Einladung einloesen.

   Diese beiden Seiten laufen bewusst ohne die Seitenleiste: wer sich anmeldet,
   soll genau ein Formular sehen. Farben und Verlauf sind dieselben wie in
   inc/header.php, nur ohne Navigation.
   Der Pfad zu den Bildern haengt vom Ordner ab, deshalb steht hier nichts,
   was auf Dateien zeigt.
   ========================================================================== */
:root{
  --bg:#0a0d14; --panel:#141924; --panel2:#1b2130; --line:#2b3446;
  --text:#e9eef6; --mut:#8d99ad; --acc:#6aa6ff; --acc2:#7bffb0; --acc3:#b98cff;
  --danger:#ff6a7d; --warn:#ffc46a;
  --grad:linear-gradient(115deg,var(--acc),var(--acc3) 55%,var(--acc2));
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
     font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
     display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}

/* Farbschleier, festgehalten im Fenster */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 12%, rgba(106,166,255,.16), transparent 70%),
    radial-gradient(34% 40% at 82% 8%,  rgba(185,140,255,.14), transparent 70%),
    radial-gradient(42% 38% at 60% 88%, rgba(123,255,176,.09), transparent 70%);
}

.box{width:100%;max-width:390px;background:linear-gradient(160deg,var(--panel),var(--panel2));
     border:1px solid var(--line);border-radius:14px;padding:30px;
     box-shadow:0 18px 44px rgba(0,0,0,.5)}
.box.wide{max-width:470px}

.brand{text-align:center;margin-bottom:22px}
.brand img{width:88px;height:88px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.brand div{font-weight:800;margin-top:8px;background:var(--grad);
           -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand span{display:block;color:var(--mut);font-size:.8rem;font-weight:600}

label{display:block;margin:14px 0 5px;font-size:.84rem;font-weight:700;color:var(--mut)}
label .opt{font-weight:600;text-transform:none;letter-spacing:0;opacity:.75}
input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:9px;
      padding:11px 12px;color:var(--text);font:inherit}
input:focus{outline:none;border-color:var(--acc)}
input[readonly]{color:var(--mut)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      letter-spacing:.16em;text-transform:uppercase;text-align:center;font-size:1.05rem}
.tip{margin:5px 0 0;color:var(--mut);font-size:.78rem}

button{width:100%;margin-top:22px;background:var(--acc);color:#08111f;border:0;border-radius:9px;
       padding:12px;font:inherit;font-weight:800;cursor:pointer}
button:hover{filter:brightness(1.08)}

.err{margin-top:16px;padding:10px 12px;border-radius:9px;font-size:.85rem;
     background:rgba(255,106,125,.12);border:1px solid var(--danger);color:var(--danger)}
.ok{margin-top:16px;padding:10px 12px;border-radius:9px;font-size:.85rem;
    background:rgba(123,255,176,.10);border:1px solid var(--acc2);color:var(--acc2)}

.hint{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
      color:var(--mut);font-size:.83rem;text-align:center}
.hint a{color:var(--acc)}
.back{display:block;margin-top:14px;text-align:center;color:var(--mut);font-size:.83rem;
      text-decoration:none}
.back:hover{color:var(--text)}