.elementor-225 .elementor-element.elementor-element-d039bba{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<!-- ================================================================
     PV-Tools24 · Login-Seite (Custom-HTML-Block)
     Auf einer WordPress-Seite mit Slug "login" einfügen (Elementor Canvas).
     Meldet direkt über die Seite an (REST /pvtools/v1/login) – ohne wp-login-Maske.
     ================================================================ -->
<div id="pvl-wrap">
  <div class="pvl-card">
    <div class="pvl-brand">PV-Tools24</div>
    <div class="pvl-sub">Bitte melde dich an, um deine Vertriebs- und Unternehmertools zu nutzen.</div>

    <div class="pvl-tabs">
      <button type="button" class="pvl-tab active" data-tab="login">Anmelden</button>
      <button type="button" class="pvl-tab" data-tab="register">Registrieren</button>
    </div>

    <!-- ANMELDEN -->
    <form id="pvl-login" class="pvl-form active" autocomplete="on">
      <label class="pvl-lbl">E-Mail oder Benutzername</label>
      <input type="text" id="pvl-user" autocomplete="username" inputmode="email" required>
      <label class="pvl-lbl">Passwort</label>
      <input type="password" id="pvl-pass" autocomplete="current-password" required>
      <label class="pvl-remember"><input type="checkbox" id="pvl-remember" checked> Angemeldet bleiben</label>
      <button type="submit" class="pvl-btn">Anmelden</button>
    </form>

    <!-- REGISTRIEREN -->
    <form id="pvl-register" class="pvl-form" autocomplete="on">
      <label class="pvl-lbl">Name</label>
      <input type="text" id="pvl-rname" autocomplete="name">
      <label class="pvl-lbl">E-Mail</label>
      <input type="email" id="pvl-remail" autocomplete="email" required>
      <label class="pvl-lbl">Passwort (mind. 8 Zeichen)</label>
      <input type="password" id="pvl-rpass" autocomplete="new-password" minlength="8" required>
      <button type="submit" class="pvl-btn">Konto erstellen</button>
    </form>

    <div id="pvl-msg" class="pvl-msg"></div>
  </div>
</div>

<style>
  #pvl-wrap{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;padding:32px 18px;overflow:auto;
    background:radial-gradient(ellipse 90% 70% at 12% 8%,rgba(34,211,238,0.40) 0%,transparent 60%),radial-gradient(ellipse 70% 60% at 88% 88%,rgba(236,72,153,0.34) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 60% 40%,rgba(139,92,246,0.30) 0%,transparent 70%),linear-gradient(160deg,#342D6B 0%,#241f4a 100%);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
  #pvl-wrap *{box-sizing:border-box;}
  .pvl-card{width:100%;max-width:400px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;padding:34px 30px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 24px 60px rgba(0,0,0,0.45);}
  .pvl-brand{font-size:1.7rem;font-weight:800;letter-spacing:.4px;text-align:center;
    background:linear-gradient(90deg,#22D3EE,#8B5CF6 55%,#EC4899);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:#8B5CF6;}
  .pvl-sub{color:rgba(255,255,255,0.62);font-size:.9rem;text-align:center;margin:8px 0 22px;line-height:1.5;}
  .pvl-tabs{display:flex;gap:6px;background:rgba(255,255,255,0.05);border-radius:12px;padding:5px;margin-bottom:20px;}
  .pvl-tab{flex:1;border:0;background:transparent;color:rgba(255,255,255,0.6);font-weight:700;font-size:.9rem;
    padding:9px 0;border-radius:9px;cursor:pointer;transition:all .18s;}
  .pvl-tab.active{background:linear-gradient(90deg,#8B5CF6,#06B6D4);color:#fff;box-shadow:0 4px 14px rgba(139,92,246,.4);}
  .pvl-form{display:none;flex-direction:column;}
  .pvl-form.active{display:flex;}
  .pvl-lbl{color:rgba(255,255,255,0.72);font-size:.78rem;font-weight:600;margin:12px 0 5px;}
  .pvl-form input[type=text],.pvl-form input[type=email],.pvl-form input[type=password]{
    width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.05);color:#fff;font-size:.95rem;outline:none;transition:border .18s;}
  .pvl-form input:focus{border-color:#22D3EE;}
  .pvl-remember{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.6);font-size:.82rem;margin:14px 0 4px;cursor:pointer;}
  .pvl-remember input{width:16px;height:16px;accent-color:#8B5CF6;}
  .pvl-btn{margin-top:20px;padding:13px;border:0;border-radius:11px;font-weight:800;font-size:1rem;color:#fff;cursor:pointer;
    background:linear-gradient(90deg,#8B5CF6,#06B6D4);transition:transform .12s,opacity .18s;}
  .pvl-btn:hover{transform:translateY(-1px);}
  .pvl-btn:disabled{opacity:.6;cursor:default;transform:none;}
  .pvl-msg{margin-top:16px;font-size:.86rem;text-align:center;min-height:1.1em;line-height:1.4;}
  .pvl-msg.err{color:#FDA4A4;}
  .pvl-msg.ok{color:#6EE7B7;}
</style>

<script>
(function(){
  var API = location.origin + '/wp-json/pvtools/v1';
  var msg = document.getElementById('pvl-msg');

  function redirectTarget(){
    var p = new URLSearchParams(location.search).get('redirect_to') || '';
    try { p = decodeURIComponent(p); } catch(e){}
    // Nur seiteneigene Ziele zulassen (kein offener Redirect).
    if (p && p.indexOf('/') === 0) return location.origin + p;
    if (p && p.indexOf(location.origin) === 0) return p;
    return location.origin + '/';
  }
  function show(text, kind){ msg.textContent = text || ''; msg.className = 'pvl-msg' + (kind ? ' ' + kind : ''); }

  // Tabs
  var tabs = document.querySelectorAll('.pvl-tab');
  var forms = { login: document.getElementById('pvl-login'), register: document.getElementById('pvl-register') };
  tabs.forEach(function(t){
    t.addEventListener('click', function(){
      tabs.forEach(function(x){ x.classList.remove('active'); });
      t.classList.add('active');
      for (var k in forms) forms[k].classList.toggle('active', k === t.dataset.tab);
      show('');
    });
  });

  function post(path, body, btn){
    if (btn){ btn.disabled = true; }
    return fetch(API + path, {
      method:'POST', credentials:'same-origin',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify(body)
    }).then(function(r){ return r.json().then(function(j){ return { ok:r.ok, j:j }; }); })
      .catch(function(){ return { ok:false, j:{ message:'Netzwerkfehler.' } }; })
      .then(function(res){ if (btn){ btn.disabled = false; } return res; });
  }

  // Anmelden
  forms.login.addEventListener('submit', function(e){
    e.preventDefault();
    var btn = forms.login.querySelector('.pvl-btn');
    show('Anmeldung läuft …');
    post('/login', {
      login: document.getElementById('pvl-user').value.trim(),
      password: document.getElementById('pvl-pass').value,
      remember: document.getElementById('pvl-remember').checked
    }, btn).then(function(res){
      if (res.ok && res.j && res.j.ok){ show('Angemeldet. Weiterleitung …', 'ok'); location.href = redirectTarget(); }
      else { show((res.j && res.j.message) || 'Anmeldung fehlgeschlagen.', 'err'); }
    });
  });

  // Registrieren
  forms.register.addEventListener('submit', function(e){
    e.preventDefault();
    var btn = forms.register.querySelector('.pvl-btn');
    show('Konto wird erstellt …');
    post('/register', {
      name: document.getElementById('pvl-rname').value.trim(),
      email: document.getElementById('pvl-remail').value.trim(),
      password: document.getElementById('pvl-rpass').value
    }, btn).then(function(res){
      if (res.ok && res.j && res.j.ok){ show('Konto erstellt. Weiterleitung …', 'ok'); location.href = redirectTarget(); }
      else { show((res.j && res.j.message) || 'Registrierung nicht möglich.', 'err'); }
    });
  });
})();
</script>/* End custom CSS */