/* =====================================================================
   Gemivo Konto — edles helles Theme (Designsprache der Landing/Store)
   Datei: /var/www/html/konto/konto-edel.css
   Wird NACH dem gu_head-<style> geladen und überschreibt das alte
   Dark-only-Theme. Hell = Default, Dunkel via <html data-theme="dark">
   (gleicher Mechanismus wie store/assets/theme.js: Cookie/localStorage
   "gemivo_theme", sonst prefers-color-scheme).
   ===================================================================== */

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:rgba(15,18,40,.09);
  --border-hi:rgba(15,18,40,.16);
  --txt:#11142a;
  --txt-dim:#565a72;
  --txt-faint:#878aa0;
  --accent:#2563eb;
  --accent-2:#06b6d4;
  --grad-btn:linear-gradient(120deg,#2563eb,#06b6d4);
  --shadow-lg:0 24px 60px rgba(37,99,235,.14), 0 8px 24px rgba(15,18,40,.08);
  --field-bg:#ffffff;
  --ok-bg:rgba(5,150,105,.07);  --ok-bd:rgba(5,150,105,.25);  --ok-tx:#047857;
  --err-bg:rgba(220,38,38,.06); --err-bd:rgba(220,38,38,.28); --err-tx:#b91c1c;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0b0f1d;
  --card:#141a2e;
  --border:rgba(255,255,255,.09);
  --border-hi:rgba(255,255,255,.16);
  --txt:#e8ecf6;
  --txt-dim:#a6b0cc;
  --txt-faint:#7d87a6;
  --shadow-lg:0 24px 60px rgba(0,0,0,.56), 0 8px 24px rgba(37,99,235,.14);
  --field-bg:rgba(255,255,255,.045);
  --ok-bg:rgba(52,211,153,.09);  --ok-bd:rgba(52,211,153,.3);  --ok-tx:#6ee7b7;
  --err-bg:rgba(239,68,68,.10);  --err-bd:rgba(239,68,68,.3);  --err-tx:#fca5a5;
  color-scheme:dark;
}

/* ---- Grundfläche: heller Verlauf + weiche Farb-Glows + feines Punktraster
       (identisch zur Landing) ---- */
body{background:var(--bg);color:var(--txt);letter-spacing:-.011em}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 680px at 50% -16%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(820px 560px at 90% 6%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(760px 520px at 4% 16%, rgba(6,182,212,.10), transparent 62%),
    linear-gradient(180deg,#f7f8fc 0%,#eef1f8 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(15,18,60,.05) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% -8%, #000 36%, transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% -8%, #000 36%, transparent 76%);
  opacity:.7;
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(1100px 680px at 50% -16%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(820px 560px at 90% 6%, rgba(124,58,237,.14), transparent 62%),
    radial-gradient(760px 520px at 4% 16%, rgba(6,182,212,.12), transparent 62%),
    linear-gradient(180deg,#0d1222 0%,#0b0f1d 100%);
}
[data-theme="dark"] body::after{
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  opacity:.5;
}

a{color:var(--accent)}

/* ---- Kopfleiste: dunkle Glas-Nav exakt wie die Landing (in beiden Modi) ---- */
.top{
  position:sticky;top:0;z-index:50;
  max-width:none;margin:0;padding:0 22px;height:62px;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  background:rgba(17,21,42,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 18px rgba(15,18,40,.18);
}
.brand{font-size:18px;letter-spacing:-.3px}
.brand .logo{width:32px;height:32px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08)}
/* Sprach-Umschalter (EN/DE) im Landing-„langtoggle“-Look — überschreibt Inline-Styles */
.top span a[href*="lang="]{
  color:rgba(255,255,255,.8)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.06);
  padding:5px 11px!important;
  font-weight:650!important;
  transition:.15s;
}
.top span a[href*="lang="]:hover{color:#fff!important;border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.12)}
/* „← Store“-Link */
.top span a[href="/"]{color:rgba(255,255,255,.78)!important;font-weight:500;transition:color .15s}
.top span a[href="/"]:hover{color:#fff!important}
/* Theme-Toggle (per JS eingefügt, gleicher Look wie Sprach-Umschalter) */
.ttog{
  font-size:13px;line-height:1;border:1px solid rgba(255,255,255,.2);border-radius:9px;
  padding:5px 10px;background:rgba(255,255,255,.06);cursor:pointer;color:rgba(255,255,255,.8);
  text-decoration:none;transition:.15s;
}
.ttog:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}

/* ---- Karte ---- */
main{padding:34px 20px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:38px 34px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.card h1{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:currentColor;color:var(--txt);
  font-size:26px;font-weight:800;letter-spacing:-.7px;
}
.card p.lead{color:var(--txt-dim);margin-bottom:22px}

/* ---- Felder ---- */
label{color:var(--txt-faint);font-size:11.5px;letter-spacing:.06em}
input{
  background:var(--field-bg);
  border:1px solid var(--border-hi);
  border-radius:12px;
  color:var(--txt);
}
input::placeholder{color:var(--txt-faint)}
input:focus{
  border-color:var(--accent);
  background:var(--field-bg);
  box-shadow:0 0 0 3px rgba(37,99,235,.13);
}
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--txt);
}
.pw-toggle{color:var(--txt-faint)}
.pw-toggle:hover{color:var(--txt)}

/* ---- Buttons ---- */
.btn{
  background:var(--grad-btn);
  border-radius:13px;
  box-shadow:0 10px 26px rgba(37,99,235,.28);
  font-weight:700;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,99,235,.38)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-ghost{background:var(--card);border:1px solid var(--border-hi);color:var(--txt);box-shadow:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--card)}

/* ---- Trust-Kasten + „Wer steckt dahinter“ (Klassen statt Inline-Styles) ---- */
.trust{
  display:flex;gap:9px;align-items:center;
  background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-tx);
  border-radius:12px;padding:10px 13px;
  font-size:12.5px;font-weight:560;line-height:1.45;margin:2px 0 14px;
}
.trust .ic{font-size:15px}
.card p.lead.who{font-size:12.5px;color:var(--txt-faint);margin:-6px 0 18px;line-height:1.6}
.card p.lead.who a{color:inherit;text-decoration:underline}

/* ---- Meldungen / Fußzeile ---- */
.msg-err{background:var(--err-bg);border-color:var(--err-bd);color:var(--err-tx)}
.msg-err a{color:inherit;text-decoration:underline;font-weight:650}
.msg-ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx)}
.below{color:var(--txt-dim)}
.below a{color:var(--accent)}
footer{color:var(--txt-faint)}
footer a{color:var(--txt-dim)}

/* ---- Mobil ---- */
@media (max-width:480px){
  .top{padding:0 16px;height:58px}
  main{padding:22px 16px}
  .card{padding:30px 22px;border-radius:18px}
  .card h1{font-size:23px}
}
