/* Anmeldeseite des Kundenportals — ausgelagert wie die des Cockpits,
   damit die CSP keine inline-Skripte erlauben muss.
   Seit 03.10.2026 im Stil von wpnerd.de (siehe portal.css). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/bricolage-grotesque.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/jetbrains-mono.woff2) format("woff2"); }
:root { --bg:#0f1411; --panel:#161c18; --line:#2b332d; --ink:#eef0ea; --dim:#b8bfb9; --accent:#7fe0a0; --rot:#ff7b72;
  --anzeige:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"JetBrains Mono", ui-monospace, Consolas, monospace; }
* { box-sizing:border-box; margin:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
body { color:var(--ink); font:15.5px/1.55 var(--anzeige); min-height:100vh; display:grid; place-items:center; padding:1rem; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(700px 420px at 50% 30%, rgba(127,224,160,.13), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--bg); }
.karte { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:2.3rem 2.1rem 2rem; width:min(400px,100%); display:flex; flex-direction:column; gap:1.1rem;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(127,224,160,.08), inset 0 1px 0 rgba(255,255,255,.04); }
.marke { display:flex; align-items:center; gap:.6rem; }
.marke__zeichen { color:var(--accent); font-size:1.5rem; }
.marke__text { font-weight:700; font-size:1.05rem; }
.marke__wort { display:none; font-family:var(--mono); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; }
.marke__wort b { color:var(--accent); font-weight:700; }
.marke__wort i { color:var(--accent); font-style:normal; margin-left:-.08em; }
html[data-marke="wpnerd"] .marke__wort { display:inline; }
html[data-marke="wpnerd"] .marke__zeichen { display:none; }
html[data-marke="wpnerd"] .marke { flex-direction:column; align-items:flex-start; gap:.9rem; }
html[data-marke="wpnerd"] .marke__text { font-size:1.7rem; font-weight:800; letter-spacing:-.025em; line-height:1.1; }
p.hinweis { color:var(--dim); font-size:.95rem; }
label { display:flex; flex-direction:column; gap:.4rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:#8e968f; }
input { background:rgba(255,255,255,.05); border:1px solid #3a443c; border-radius:10px; color:var(--ink); font:1rem var(--anzeige); padding:.75rem .85rem; }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,224,160,.18); }
button { background:var(--accent); border:none; border-radius:10px; color:#0f1411; cursor:pointer; font:700 1.02rem var(--anzeige); padding:.8rem; margin-top:.2rem;
  box-shadow:0 12px 30px -12px rgba(127,224,160,.6); transition:background .15s, transform .15s; }
button:hover:not(:disabled) { background:#96eab3; transform:translateY(-1px); }
button:disabled { opacity:.6; cursor:wait; }
.fehler { color:var(--rot); font-size:.92rem; min-height:1.4em; }
/* Passwort festlegen / vergessen (passwort.html): Formulare per hidden umschalten. */
[hidden] { display:none !important; }
.hinweis a, a.leise { color:var(--dim); text-underline-offset:3px; }
.hinweis a:hover, a.leise:hover { color:var(--accent); }
a.leise { font-size:.9rem; align-self:flex-start; }