/* =================================================================
   ENERGIELÖWEN UG – Corporate Design v2
   Navy #0D2B52 · Gold #D4AF37 · Weiß #FFFFFF
   Mobile First · IBM Plex Sans
   ================================================================= */
:root {
  --navy:      #0D2B52;
  --navy-700:  #0a2245;
  --navy-600:  #112f5c;
  --navy-50:   #EEF3FA;
  --gold:      #D4AF37;
  --gold-600:  #b8941f;
  --gold-50:   #FBF7E3;
  --white:     #FFFFFF;
  --bg:        #F4F6FA;
  --surface:   #FFFFFF;
  --text:      #0F172A;
  --muted:     #4B5A6E;
  --border:    #D4DCE9;
  --error:     #C0322B;
  --success:   #1A6E3C;
  --warn-bg:   #FEF9E7;
  --warn:      #7A5A00;
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 4px rgba(13,43,82,.07),0 6px 20px rgba(13,43,82,.06);
  --shadow-lg: 0 16px 48px rgba(13,43,82,.22);
  --maxw:      700px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;color:var(--navy);margin:0 0 .4em}
[hidden]{display:none!important}
img{max-width:100%;height:auto}

/* ── Layout ─────────────────────────────────── */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.grid-2{display:grid;grid-template-columns:1fr;gap:0 16px}

/* ── LOGIN ──────────────────────────────────── */
.login-body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  background:linear-gradient(145deg,#071828 0%,var(--navy-700) 50%,#0e2a50 100%);
  padding:20px 16px}
.login-wrap{width:100%;display:grid;place-items:center}
.login-card{width:100%;max-width:420px;background:var(--white);border-radius:var(--radius);
  padding:32px 24px 28px;box-shadow:var(--shadow-lg)}
.login-logo-wrap{text-align:center;margin-bottom:20px}
.login-logo{width:120px;height:120px;object-fit:contain}
.login-title{text-align:center;font-size:1.3rem;margin-bottom:4px}
.login-hint{text-align:center;color:var(--muted);font-size:.88rem;margin:0 0 18px}
.login-footer-note{text-align:center;color:var(--muted);font-size:.76rem;margin:20px 0 0}

/* Password toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;
  display:flex;align-items:center}
.pw-toggle svg{width:20px;height:20px}

/* ── APP HEADER ─────────────────────────────── */
.app-header{background:var(--navy);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:40}
.app-header-inner{max-width:var(--maxw);margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.header-brand{display:flex;align-items:center;gap:10px}
.header-logo{width:38px;height:38px;object-fit:contain;border-radius:6px}
.header-name{font-weight:700;color:var(--white);font-size:.95rem;letter-spacing:.2px}
.header-nav{display:flex;align-items:center;gap:2px}
.nav-link{color:rgba(255,255,255,.8);text-decoration:none;font-size:.88rem;font-weight:500;
  padding:8px 10px;border-radius:var(--radius-sm);transition:background .15s,color .15s;
  min-height:44px;display:inline-flex;align-items:center}
.nav-link:hover{background:rgba(255,255,255,.1);color:var(--white)}
.nav-logout{color:var(--gold)}
.nav-logout:hover{background:rgba(212,175,55,.1)}
.nav-admin{background:rgba(212,175,55,.15);color:var(--gold)}

/* ── EMPLOYEE BADGE ─────────────────────────── */
.emp-bar{background:var(--navy-50);border-bottom:1px solid #C5D2E4;padding:8px 0}
.emp-badge{display:flex;align-items:center;gap:10px}
.emp-badge svg{width:18px;height:18px;color:var(--navy-600);flex:none}
.emp-badge strong{font-size:.9rem;color:var(--navy)}
.emp-badge span{font-size:.76rem;color:var(--muted)}
.emp-badge-info{display:flex;flex-direction:column;line-height:1.3}

/* ── INTRO ──────────────────────────────────── */
.intro{padding:22px 0 6px}
.intro h1{font-size:1.4rem;margin-bottom:8px}
.intro p{color:var(--muted);margin:0;max-width:58ch;font-size:.95rem}

/* ── FIELDSETS / FORM ───────────────────────── */
fieldset{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:18px 16px 8px;margin:16px 0;box-shadow:var(--shadow)}
legend{font-weight:700;font-size:.98rem;color:var(--navy);padding:0 8px}
.field{margin-bottom:15px}
.field label,.field-lbl{display:block;font-weight:500;font-size:.92rem;margin-bottom:5px}
.req{color:var(--gold-600);font-weight:700}

input[type=text],input[type=tel],input[type=email],input[type=password],
input[type=date],select,textarea{
  width:100%;font:inherit;color:var(--text);background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 13px;min-height:48px;
  transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
textarea{min-height:80px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(13,43,82,.13)}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--error);box-shadow:0 0 0 3px rgba(192,50,43,.11)}
.error-text{color:var(--error);font-size:.8rem;margin:5px 0 0}
.error-text:empty{display:none}

/* ── CHECKBOXES ─────────────────────────────── */
.checkbox-grid{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:14px}
.checkbox{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;
  background:var(--white);transition:border-color .18s,background .18s;min-height:48px}
.checkbox:hover{border-color:var(--navy-600)}
.checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy);flex:none;cursor:pointer}
.checkbox span{font-size:.92rem}
.checkbox:has(input:checked){border-color:var(--gold);background:var(--gold-50)}
.consent-box{background:var(--navy-50);border-color:#BDC9DB}
.checkbox--consent{border:none;padding:4px 0;background:transparent;align-items:flex-start}

/* ── SIGNATURE PAD ──────────────────────────── */
.signature-section{margin-top:6px}
.signature-label{font-weight:500;font-size:.92rem;margin-bottom:8px;display:block;color:var(--navy)}
.sig-wrap{position:relative;border:2px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;overflow:hidden;cursor:crosshair;touch-action:none}
.sig-wrap.signed{border-color:var(--gold)}
.sig-wrap canvas{display:block;width:100%;height:160px}
.sig-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  color:var(--muted);font-size:.88rem;pointer-events:none;transition:opacity .2s}
.sig-placeholder svg{width:28px;height:28px;opacity:.4}
.sig-wrap.signed .sig-placeholder{opacity:0}
.sig-actions{display:flex;gap:8px;margin-top:8px}
.btn-sig-clear{font:inherit;font-size:.82rem;font-weight:600;
  background:transparent;border:1.5px solid var(--border);color:var(--muted);
  border-radius:var(--radius-sm);padding:7px 14px;cursor:pointer;min-height:38px;
  transition:border-color .15s,color .15s}
.btn-sig-clear:hover{border-color:var(--error);color:var(--error)}

/* ── BUTTONS ─────────────────────────────────── */
.btn{font:inherit;font-weight:600;border:none;border-radius:var(--radius-sm);
  padding:13px 20px;min-height:50px;cursor:pointer;transition:background .18s,transform .06s,opacity .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-primary:hover{background:var(--navy-700)}
.btn-primary:disabled{opacity:.6;cursor:progress}
.btn-block{width:100%;margin-top:10px}
.btn-submit{box-shadow:inset 0 -3px 0 var(--gold);margin-top:14px}

/* ── ALERTS / STATUS ────────────────────────── */
.alert,.form-status{padding:12px 14px;border-radius:var(--radius-sm);
  font-size:.88rem;border:1px solid;margin-bottom:12px}
.alert-error,.form-status.is-error{background:#FDECEA;border-color:#F5B7B1;color:var(--error)}
.alert-warn{background:var(--warn-bg);border-color:#F0D96B;color:var(--warn)}
.alert-success,.form-status.is-success{background:#EAF7EF;border-color:#A9D9B4;color:var(--success)}

/* ── SUCCESS OVERLAY ─────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(10,34,69,.55);
  backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:16px}
.overlay-card{background:var(--white);border-radius:var(--radius);
  padding:28px 20px;width:100%;max-width:540px;max-height:90dvh;overflow-y:auto;
  box-shadow:var(--shadow-lg);text-align:center}
.success-icon{width:56px;height:56px;color:var(--success);margin:0 auto 12px}
.success-icon svg{width:100%;height:100%}
.overlay-card h2{font-size:1.4rem;margin-bottom:6px}
.overlay-card>p{color:var(--muted);margin:0 0 20px}
.summary{text-align:left;margin:0 0 18px}
.summary h3{font-size:.92rem;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--gold);color:var(--navy)}
.summary dl{margin:0}
.summary dl>div{padding:7px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr;gap:2px}
.summary dl>div:last-child{border-bottom:none}
.summary dt{font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;color:var(--navy)}
.summary dd{margin:0;color:var(--text);word-break:break-word;font-size:.92rem}
.sig-preview{border:1px solid var(--border);border-radius:6px;margin-top:4px;max-width:200px}

/* ── FOOTER ──────────────────────────────────── */
.app-footer{padding:18px 16px 32px;text-align:center;border-top:1px solid var(--border);margin-top:6px}
.app-footer p{color:var(--muted);font-size:.78rem;margin:0}

/* ── MY LEADS TABLE ─────────────────────────── */
.leads-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-top:20px}
.leads-card-header{padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.leads-card-header h2{font-size:1rem;margin:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mini-table{width:100%;border-collapse:collapse;font-size:.86rem}
.mini-table th{background:var(--navy-50);color:var(--navy);font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;
  padding:9px 12px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border)}
.mini-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.mini-table tr:last-child td{border-bottom:none}
.mini-table tr:hover td{background:var(--navy-50)}
.badge-tag{background:var(--gold-50);color:var(--gold-600);border:1px solid #E5D46A;
  font-size:.72rem;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;display:inline-block}
.status-pill{font-size:.76rem;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.status-neu{background:#EEF3FA;color:var(--navy)}
.status-progress{background:#FEF9E7;color:var(--warn)}
.status-done{background:#EAF7EF;color:var(--success)}
.status-fail{background:#FDECEA;color:var(--error)}
.empty-state{text-align:center;color:var(--muted);padding:40px 16px;font-size:.92rem}

/* ── RESPONSIVE ──────────────────────────────── */
@media(min-width:600px){
  .grid-2{grid-template-columns:1fr 1fr}
  .checkbox-grid{grid-template-columns:1fr 1fr}
  .intro h1{font-size:1.65rem}
  .summary dl>div{grid-template-columns:170px 1fr;gap:12px;align-items:baseline}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}