/* Echo Vault UI Components */

/* Layout & Grundstil */
body{margin:0;padding:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:#FFFFFF;min-height:100vh;color:#1F2937}
.container{max-width:880px;margin:0 auto;padding:40px 24px}

/* Hero */
.hero{text-align:center;margin-bottom:24px}
.hero h1{font:600 32px/1.2 "Playfair Display",serif;margin:0 0 10px}
.hero p{margin:0;color:#6B7280}

/* Stepper */
.stepper{display:flex;justify-content:center;gap:24px;margin:18px 0 26px}
.step{display:flex;align-items:center;gap:8px;font-size:14px;color:#6B7280}
.step .num{width:24px;height:24px;border-radius:9999px;display:grid;place-items:center;
  border:2px solid #D1D5DB;font-weight:600}
.step.current{color:#0F766E;font-weight:600}
.step.current .num{border-color:#0F766E}
.step.inactive{color:#6B7280}
.step.inactive .num{border-color:#D1D5DB}


/* Formulargruppen */
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:14px;font-weight:600;color:#374151;margin:0 0 6px}
.input-group input{width:100%;border:1px solid #D1D5DB;border-radius:12px;padding:12px 14px;
  font-size:16px;outline:0;transition:box-shadow .2s,border-color .2s}
.input-group input:focus{border-color:#0F766E;box-shadow:0 0 0 6px rgba(15,118,110,.18)}
.input-group .error{margin-top:6px;font-size:13px;color:#DC2626}

/* Button */
.btn-primary{width:100%;display:inline-flex;justify-content:center;align-items:center;
  border:0;border-radius:14px;padding:14px 20px;font-weight:700;font-size:16px;
  background:#0F766E;color:#fff;cursor:pointer;box-shadow:0 8px 16px rgba(2,8,23,.08);
  transition:transform .06s ease,box-shadow .2s ease,background .2s}
.btn-primary:hover{background:#0d6b64;box-shadow:0 10px 20px rgba(2,8,23,.12)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:focus{outline:none;box-shadow:0 0 0 6px rgba(15,118,110,.24)}

/* Trust-Leiste */
.trust{margin-top:16px;text-align:center;color:#6B7280;font-size:12px}
.trust .lock{width:14px;height:14px;display:inline-block;border-radius:3px;border:2px solid currentColor;position:relative;margin-right:6px;vertical-align:-2px}
.trust .lock:before{content:"";position:absolute;top:-8px;left:3px;width:6px;height:8px;border:2px solid currentColor;border-bottom:none;border-radius:8px 8px 0 0}

/* Footer-Links */
footer{margin-top:14px;text-align:center}
footer a{color:#1E3A8A;text-decoration:underline;margin:0 8px;font-size:12px}

/* Responsiv */
@media (max-width:640px){
  .container{padding:28px 16px}
  .hero h1{font-size:26px}
  .stepper{gap:14px}
}